Add web support via stdweb and web-sys

.gitignore

@@ -2,5 +2,9 @@ Cargo.lock
 target/
 rls/
 .vscode/
+util/
 *~
+*.wasm
+*.ts
+*.js
 #*#

.travis.yml

@@ -58,6 +58,21 @@ matrix:
       os: osx
       rust: stable
 
+    # wasm stdweb
+    - env: TARGET=wasm32-unknown-unknown WEB=web FEATURES=stdweb
+      os: linux
+      rust: stable
+    - env: TARGET=wasm32-unknown-unknown WEB=web FEATURES=stdweb
+      os: linux
+      rust: nightly
+    # wasm web-sys
+    - env: TARGET=wasm32-unknown-unknown FEATURES=web-sys
+      os: linux
+      rust: stable
+    - env: TARGET=wasm32-unknown-unknown FEATURES=web-sys
+      os: linux
+      rust: nightly
+
 install:
   - rustup self update
   - rustup target add $TARGET; true
@@ -66,11 +81,19 @@ install:
 
 script:
   - cargo +stable fmt --all -- --check
-  - cargo build --target $TARGET --verbose
-  - cargo build --target $TARGET --features serde --verbose
+  # Install cargo-web to build stdweb
+  - if [[ $WEB = "web" ]]; then cargo install -f cargo-web; fi
+  # Build without serde then with serde
+  - if [[ -z "$FEATURES" ]]; then
+      cargo $WEB build --target $TARGET --verbose;
+    else
+      cargo $WEB build --target $TARGET --features $FEATURES --verbose;
+    fi
+  - cargo $WEB build --target $TARGET --features serde,$FEATURES --verbose
   # Running iOS apps on macOS requires the Simulator so we skip that for now
-  - if [[ $TARGET != *-apple-ios ]]; then cargo test --target $TARGET --verbose; fi
-  - if [[ $TARGET != *-apple-ios ]]; then cargo test --target $TARGET --features serde --verbose; fi
+  # The web targets also don't support running tests
+  - if [[ $TARGET != *-apple-ios && $TARGET != wasm32-* ]]; then cargo test --target $TARGET --verbose; fi
+  - if [[ $TARGET != *-apple-ios && $TARGET != wasm32-* ]]; then cargo test --target $TARGET --features serde --verbose; fi
 
 after_success:
   - |

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Unreleased
 
+- Add web support via the 'stdweb' or 'web-sys' features
 - On Windows, implemented function to get HINSTANCE
 - On macOS, implement `run_return`.
 - On iOS, fix inverted parameter in `set_prefers_home_indicator_hidden`.

Cargo.toml

@@ -14,7 +14,12 @@ categories = ["gui"]
 [package.metadata.docs.rs]
 features = ["serde"]
 
+[features]
+web-sys = ["web_sys", "wasm-bindgen", "instant/wasm-bindgen"]
+stdweb = ["std_web", "instant/stdweb"]
+
 [dependencies]
+instant = "0.1"
 lazy_static = "1"
 libc = "0.2"
 log = "0.4"
@@ -79,3 +84,36 @@ percent-encoding = "2.0"
 
 [target.'cfg(any(target_os = "linux", target_os = "dragonfly", target_os = "freebsd", target_os = "openbsd", target_os = "netbsd", target_os = "windows"))'.dependencies.parking_lot]
 version = "0.9"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies.web_sys]
+package = "web-sys"
+version = "0.3.22"
+optional = true
+features = [
+    'console',
+    'BeforeUnloadEvent',
+    'Document',
+    'DomRect',
+    'Element',
+    'Event',
+    'EventTarget',
+    'FocusEvent',
+    'HtmlCanvasElement',
+    'HtmlElement',
+    'KeyboardEvent',
+    'MouseEvent',
+    'Node',
+    'PointerEvent',
+    'Window',
+    'WheelEvent'
+]
+
+[target.'cfg(target_arch = "wasm32")'.dependencies.wasm-bindgen]
+version = "0.2.45"
+optional = true
+
+[target.'cfg(target_arch = "wasm32")'.dependencies.std_web]
+package = "stdweb"
+version = "=0.4.20"
+optional = true
+features = ["experimental_features_which_may_break_on_minor_version_bumps"]

FEATURES.md

@@ -163,39 +163,39 @@ Legend:
 ### Windowing
 |Feature                          |Windows|MacOS   |Linux x11   |Linux Wayland  |Android|iOS    |WASM      |
 |-------------------------------- | ----- | ----   | -------    | -----------   | ----- | ----- | -------- |
-|Window initialization            |✔️     |✔️     |▢[#5]      |✔️             |▢[#33]|▢[#33] |❓        |
-|Providing pointer to init OpenGL |✔️     |✔️     |✔️         |✔️             |✔️     |✔️    |❓        |
-|Providing pointer to init Vulkan |✔️     |✔️     |✔️         |✔️             |✔️     |❓     |❓        |
-|Window decorations               |✔️     |✔️     |✔️         |▢[#306]        |**N/A**|**N/A**|❓        |
-|Window decorations toggle        |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|❓        |
-|Window resizing                  |✔️     |▢[#219]|✔️         |▢[#306]        |**N/A**|**N/A**|❓        |
-|Window resize increments         |❌     |❌     |❌         |❌             |❌    |❌     |❓        |
-|Window transparency              |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|❓        |
-|Window maximization              |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|❓        |
-|Window maximization toggle       |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|❓        |
-|Fullscreen                       |✔️     |✔️     |✔️         |✔️             |**N/A**|✔️     |❓        |
-|Fullscreen toggle                |✔️     |✔️     |✔️         |✔️             |**N/A**|✔️     |❓        |
-|Exclusive fullscreen             |✔️     |✔️     |✔️         |**N/A**         |❌    |✔️     |❓        |
-|HiDPI support                    |✔️     |✔️     |✔️         |✔️             |▢[#721]|✔️    |❓        |
-|Popup windows                    |❌     |❌     |❌         |❌             |❌    |❌     |❓        |
+|Window initialization            |✔️     |✔️     |▢[#5]      |✔️             |▢[#33]|▢[#33] |✔️        |
+|Providing pointer to init OpenGL |✔️     |✔️     |✔️         |✔️             |✔️     |✔️    |**N/A**|
+|Providing pointer to init Vulkan |✔️     |✔️     |✔️         |✔️             |✔️     |❓     |**N/A**|
+|Window decorations               |✔️     |✔️     |✔️         |▢[#306]        |**N/A**|**N/A**|**N/A**|
+|Window decorations toggle        |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|**N/A**|
+|Window resizing                  |✔️     |▢[#219]|✔️         |▢[#306]        |**N/A**|**N/A**|✔️        |
+|Window resize increments         |❌     |❌     |❌         |❌             |❌    |❌     |**N/A**|
+|Window transparency              |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|N/A        |
+|Window maximization              |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|**N/A**|
+|Window maximization toggle       |✔️     |✔️     |✔️         |✔️             |**N/A**|**N/A**|**N/A**|
+|Fullscreen                       |✔️     |✔️     |✔️         |✔️             |**N/A**|✔️     |✔️        |
+|Fullscreen toggle                |✔️     |✔️     |✔️         |✔️             |**N/A**|✔️     |✔️        |
+|Exclusive fullscreen             |✔️     |✔️     |✔️         |**N/A**         |❌    |✔️     |**N/A**|
+|HiDPI support                    |✔️     |✔️     |✔️         |✔️             |▢[#721]|✔️    |**N/A**|
+|Popup windows                    |❌     |❌     |❌         |❌             |❌    |❌     |**N/A**|
 
 ### System information
 |Feature          |Windows|MacOS |Linux x11|Linux Wayland|Android|iOS      |WASM      |
 |---------------- | ----- | ---- | ------- | ----------- | ----- | ------- | -------- |
-|Monitor list     |✔️    |✔️    |✔️       |✔️          |**N/A**|✔️       |❓        |
-|Video mode query |✔️    |✔️    |✔️       |✔️          |❌     |✔️      |❓        |
+|Monitor list     |✔️    |✔️    |✔️       |✔️          |**N/A**|✔️       |**N/A**|
+|Video mode query |✔️    |✔️    |✔️       |✔️          |❌     |✔️      |**N/A**|
 
 ### Input handling
 |Feature                 |Windows   |MacOS   |Linux x11|Linux Wayland|Android|iOS    |WASM      |
 |----------------------- | -----    | ----   | ------- | ----------- | ----- | ----- | -------- |
-|Mouse events            |✔️       |▢[#63]  |✔️       |✔️          |**N/A**|**N/A**|❓        |
-|Mouse set location      |✔️       |✔️      |✔️       |❓           |**N/A**|**N/A**|❓        |
+|Mouse events            |✔️       |▢[#63]  |✔️       |✔️          |**N/A**|**N/A**|✔️        |
+|Mouse set location      |✔️       |✔️      |✔️       |❓           |**N/A**|**N/A**|**N/A**|
 |Cursor grab             |✔️       |▢[#165] |▢[#242]  |✔️         |**N/A**|**N/A**|❓        |
-|Cursor icon             |✔️       |✔️      |✔️       |✔️           |**N/A**|**N/A**|❓        |
-|Touch events            |✔️       |❌      |✔️       |✔️          |✔️    |✔️     |❓        |
-|Touch pressure          |✔️       |❌      |❌       |❌          |❌    |✔️     |❓        |
-|Multitouch              |✔️       |❌      |✔️       |✔️          |❓     |✔️     |❓        |
-|Keyboard events         |✔️       |✔️      |✔️       |✔️          |❓     |❌     |❓        |
+|Cursor icon             |✔️       |✔️      |✔️       |✔️           |**N/A**|**N/A**|✔️        |
+|Touch events            |✔️       |❌      |✔️       |✔️          |✔️    |✔️     |✔️        |
+|Touch pressure          |✔️       |❌      |❌       |❌          |❌    |✔️     |✔️        |
+|Multitouch              |✔️       |❌      |✔️       |✔️          |❓     |✔️     |✔️        |
+|Keyboard events         |✔️       |✔️      |✔️       |✔️          |❓     |❌     |✔️        |
 |Drag & Drop             |▢[#720]  |▢[#720] |▢[#720]  |❌[#306]    |**N/A**|**N/A**|❓        |
 |Raw Device Events       |▢[#750]  |▢[#750] |▢[#750]  |❌          |❌    |❌     |❓        |
 |Gamepad/Joystick events |❌[#804] |❌      |❌       |❌          |❌    |❌     |❓        |

examples/custom_events.rs

@@ -1,15 +1,16 @@
-use winit::{
-    event::{Event, WindowEvent},
-    event_loop::{ControlFlow, EventLoop},
-    window::WindowBuilder,
-};
+#[cfg(not(target_arch = "wasm32"))]
+fn main() {
+    use winit::{
+        event::{Event, WindowEvent},
+        event_loop::{ControlFlow, EventLoop},
+        window::WindowBuilder,
+    };
 
-#[derive(Debug, Clone, Copy)]
-enum CustomEvent {
-    Timer,
-}
+    #[derive(Debug, Clone, Copy)]
+    enum CustomEvent {
+        Timer,
+    }
 
-fn main() {
     let event_loop = EventLoop::<CustomEvent>::with_user_event();
 
     let _window = WindowBuilder::new()
@@ -39,3 +40,8 @@ fn main() {
         _ => *control_flow = ControlFlow::Wait,
     });
 }
+
+#[cfg(target_arch = "wasm32")]
+fn main() {
+    panic!("This example is not supported on web.");
+}

examples/multithreaded.rs

@@ -1,16 +1,18 @@
-extern crate env_logger;
-use std::{collections::HashMap, sync::mpsc, thread, time::Duration};
+#[cfg(not(target_arch = "wasm32"))]
+fn main() {
+    extern crate env_logger;
 
-use winit::{
-    event::{ElementState, Event, KeyboardInput, VirtualKeyCode, WindowEvent},
-    event_loop::{ControlFlow, EventLoop},
-    window::{CursorIcon, Fullscreen, WindowBuilder},
-};
+    use std::{collections::HashMap, sync::mpsc, thread, time::Duration};
 
-const WINDOW_COUNT: usize = 3;
-const WINDOW_SIZE: (u32, u32) = (600, 400);
+    use winit::{
+        event::{ElementState, Event, KeyboardInput, VirtualKeyCode, WindowEvent},
+        event_loop::{ControlFlow, EventLoop},
+        window::{CursorIcon, Fullscreen, WindowBuilder},
+    };
+
+    const WINDOW_COUNT: usize = 3;
+    const WINDOW_SIZE: (u32, u32) = (600, 400);
 
-fn main() {
     env_logger::init();
     let event_loop = EventLoop::new();
     let mut window_senders = HashMap::with_capacity(WINDOW_COUNT);
@@ -59,7 +61,7 @@ fn main() {
                     } => {
                         window.set_title(&format!("{:?}", key));
                         let state = !modifiers.shift;
-                        use self::VirtualKeyCode::*;
+                        use VirtualKeyCode::*;
                         match key {
                             A => window.set_always_on_top(state),
                             C => window.set_cursor_icon(match state {
@@ -167,3 +169,8 @@ fn main() {
         }
     })
 }
+
+#[cfg(target_arch = "wasm32")]
+fn main() {
+    panic!("Example not supported on Wasm");
+}

examples/request_redraw.rs

@@ -1,4 +1,5 @@
-use std::time::{Duration, Instant};
+use instant::Instant;
+use std::time::Duration;
 
 use winit::{
     event::{Event, WindowEvent},

examples/timer.rs

@@ -1,4 +1,5 @@
-use std::time::{Duration, Instant};
+use instant::Instant;
+use std::time::Duration;
 use winit::{
     event::{Event, StartCause, WindowEvent},
     event_loop::{ControlFlow, EventLoop},

examples/window_run_return.rs

@@ -15,7 +15,6 @@ fn main() {
         platform::desktop::EventLoopExtDesktop,
         window::WindowBuilder,
     };
-
     let mut event_loop = EventLoop::new();
 
     let window = WindowBuilder::new()
@@ -50,7 +49,7 @@ fn main() {
     println!("Okay we're done now for real.");
 }
 
-#[cfg(any(target_os = "ios", target_os = "android"))]
+#[cfg(any(target_os = "ios", target_os = "android", target_arch = "wasm32"))]
 fn main() {
     println!("This platform doesn't support run_return.");
 }

src/dpi.rs

@@ -55,6 +55,7 @@
 //! - **Wayland:** On Wayland, DPI factors are set per-screen by the server, and are always integers (most often 1 or 2).
 //! - **iOS:** DPI factors are both constant and device-specific on iOS.
 //! - **Android:** This feature isn't yet implemented on Android, so the DPI factor will always be returned as 1.0.
+//! - **Web:** DPI factors are handled by the browser and will always be 1.0 for your application.
 //!
 //! The window's logical size is conserved across DPI changes, resulting in the physical size changing instead. This
 //! may be surprising on X11, but is quite standard elsewhere. Physical size changes always produce a

src/event.rs

@@ -4,7 +4,8 @@
 //! processed and used to modify the program state. For more details, see the root-level documentation.
 //!
 //! [event_loop_run]: ../event_loop/struct.EventLoop.html#method.run
-use std::{path::PathBuf, time::Instant};
+use instant::Instant;
+use std::path::PathBuf;
 
 use crate::{
     dpi::{LogicalPosition, LogicalSize},
@@ -61,7 +62,7 @@ impl<T> Event<T> {
 }
 
 /// Describes the reason the event loop is resuming.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum StartCause {
     /// Sent if the time specified by `ControlFlow::WaitUntil` has been reached. Contains the
     /// moment the timeout was requested and the requested resume time. The actual resume time is

src/event_loop.rs

@@ -9,7 +9,9 @@
 //! [create_proxy]: ./struct.EventLoop.html#method.create_proxy
 //! [event_loop_proxy]: ./struct.EventLoopProxy.html
 //! [send_event]: ./struct.EventLoopProxy.html#method.send_event
-use std::{error, fmt, ops::Deref, time::Instant};
+use instant::Instant;
+use std::ops::Deref;
+use std::{error, fmt};
 
 use crate::{event::Event, monitor::MonitorHandle, platform_impl};
 
@@ -66,7 +68,7 @@ impl<T> fmt::Debug for EventLoopWindowTarget<T> {
 /// the control flow to `Poll`.
 ///
 /// [events_cleared]: ../event/enum.Event.html#variant.EventsCleared
-#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
+#[derive(Copy, Clone, Debug, PartialEq, Eq)]
 pub enum ControlFlow {
     /// When the current loop iteration finishes, immediately begin a new iteration regardless of
     /// whether or not new events are available to process.

src/lib.rs

@@ -50,7 +50,7 @@
 //!     match event {
 //!         Event::EventsCleared => {
 //!             // Application update code.
-//!     
+//!
 //!             // Queue a RedrawRequested event.
 //!             window.request_redraw();
 //!         },
@@ -126,6 +126,8 @@ extern crate bitflags;
 #[cfg(any(target_os = "macos", target_os = "ios"))]
 #[macro_use]
 extern crate objc;
+#[cfg(feature = "std_web")]
+extern crate std_web as stdweb;
 
 pub mod dpi;
 #[macro_use]