Add support for building with web-sys (#961)

* Enable travis

* `web-sys` general conversion (#826)

* Moved patches from different PRs.

* Add bits & pieces and some services.

* Rename `stdweb` feature to `std_web`.

* Move tests and examples to different PR.

* Revert some `cargo_web` handling removal.

* Missed something.

* Implement `console_error_panic_hook`.

* Update Cargo.toml

Co-authored-by: Justin Starry <justin.m.starry@gmail.com>

* Move document creation to util convenience method (#855)

* `web-sys` listener conversion (#813)

* `web-sys` listener initial try.

* Improve macros?

* Remove generic from `EventListenerHandle`.

* Fix build.

* A cleaner solution?

* Even cleaner.

* Fix `build.rs`.

* Minor improvements.

* Following the yew toml style.

* Fixing visibility.

* Fix `rustfmt`.

* Add `web-sys` re-exports.

* Move general changes to different PR.

* Remove compat.

* Actually remove `compat.rs`.

* Rename `stdweb` feature to `std_web`.

* Move to gloo's `EventListener` and some polish.

* Remove outdated comment.

* Change `EventHandler` to be cancelled on drop.

* `web-sys` html conversion (#817)

* Converting all `html` parts.

* Format.

* Move general changes to different PR.

* Removed compat.

* Rename `stdweb` feature to `std_web`.

* Remove redudant function copy.

* Some polish.

* Move to gloo's `EventListener`.

* Replace `unwrap`s with `expect`s.

* `web-sys` agent conversion (#818)

* Converting `agent`.

* Remove wrong `cfg` in imports.

* Move general changes to different PR.

* Some optimisations.

* Rename `stdweb` feature to `std_web`.

* Fix `ArrayBuffer` to `Uint8Array` conversions.

* Add js module worker.

* Use `cfg-if`` and `cfg-match` to make things clearer.

* Fix `std_web` build.

* Add some polish.

* Add build guards for invalid build configs (#866)

* `web_sys` cfg conversion (#862)

* Use `cfg-if` and `cfg-match` and some polish.

* Mistakes were made.

* Missed line during rebasing.

* Mistakes were undone.

* Remove global.

* Remove part of `global!`.

* `web-sys` services conversion (#827)

* Convert `console`.

* Finish services.

* Some polish.

* Fix `ArrayBuffer` to `Uint8Array` conversions.

* Fix aborting fetch leading to error and some polish.

* Replaced some `unwrap`s with `expect`s.

* Use `cfg_if` and `cfg_match` and do some polish.

* Proper scoping.

* Some fixes.

* Move fetch and reader services to different PR.

* Revert split.

* Fix CI builds (#877)

* Fix derive_props_test

* Move tests (#897) (#898)

* `web-sys` fetch service conversion (#867)

* Split implementation.

* Import global.

* Import global.

* Revert split.

* Make fetch available again.

* Revert "Revert split."

This reverts commit 6e3f101.

* Re-revert split.

* Some polish.

* Move to `wasm_bindgen_futures`.

* Switch to `thiserror`.

* wip

* Update src/services/fetch/web_sys.rs

Co-Authored-By: daxpedda <daxpedda@gmail.com>

* Some more polish.

Co-authored-by: Justin Starry <justin.m.starry@gmail.com>

* `web-sys` reader service conversion (#868)

* Split reader implementation.

* Revert split.

* Remove leftover files.

* Make reader available again.

* Revert "Revert split."

This reverts commit 8abdc9c.

* Revert "Remove leftover files."

This reverts commit 188c6eb.

* Re-revert split.

* Polish.

* Forgot some part.

* Some polish.

* Some polish.

* `web-sys` examples/tests conversion (#841)

* Fix examples/tests to work with `web_sys`.

* Update `StorageService` usage.

* Split `stdweb` and `web-sys` examples.

* Fixing the shell script.

* Trying to reset file permissions.

* Update to new reader API.

* Update to new fetch API.

* Update to new fetch API.

* Re-enable examples CI.

* Deleted duplicate example.

* Some fixes.

* Fix rand build.

* Fix spawning workers in combination with `wasm-bindgen`. (#901)

* Fix component rendering process (#913)

* wip

* Fix component rendering process

* Simplify yew-macro a bit (#902)

* yew-macro: Simplify Properties validation

* Fix most clippy warnings

* Fix clippy warnings (#912)

* Import Task trait in dashboard example

* Remove duplicate vtag tests

* Fix prevent_default() by non-passive (#958)

* Fix prevent_default() by non-passive

* Fix cargo fmt

* Remove `Option` from most services.

* Remove `Option` from resize service.

* Apply fetch changes.

* Apply reader service changes.

* Fix `node_refs` example.

* Remove web-sys travis branch

Co-authored-by: daxpedda <daxpedda@gmail.com>
Co-authored-by: Jonas Platte <jplatte@users.noreply.github.com>
Co-authored-by: Jet Li <jing.i.qin@icloud.com>

Cargo.toml

@@ -22,8 +22,14 @@ travis-ci = { repository = "yewstack/yew" }
 anyhow = "1"
 anymap = "0.12"
 bincode = { version = "~1.2.1", optional = true }
+cfg-if = "0.1"
+cfg-match = "0.2"
+console_error_panic_hook = { version = "0.1", optional = true }
+futures = { version = "0.3", optional = true }
+gloo = { version = "0.2", optional = true }
 http = "0.2"
 indexmap = "1.0.2"
+js-sys = { version = "0.3", optional = true }
 log = "0.4"
 proc-macro-hack = "0.5"
 proc-macro-nested = "0.1"
@@ -33,14 +39,73 @@ serde_cbor = { version = "0.11.1", optional = true }
 serde_json = "1.0"
 serde_yaml = { version = "0.8.3", optional = true }
 slab = "0.4"
-stdweb = "0.4.20"
+stdweb = { version = "0.4.20", optional = true }
 thiserror = "1"
 toml = { version = "0.5", optional = true }
+wasm-bindgen = { version = "0.2.58", optional = true }
+wasm-bindgen-futures = { version = "0.4", optional = true }
 yew-macro = { version = "0.12.0", path = "crates/macro" }
 
+[dependencies.web-sys]
+version = "0.3"
+optional = true
+features = [
+  "AbortController",
+  "AbortSignal",
+  "BinaryType",
+  "Blob",
+  "BlobPropertyBag",
+  "console",
+  "DedicatedWorkerGlobalScope",
+  "Document",
+  "DomException",
+  "DomTokenList",
+  "DragEvent",
+  "Element",
+  "Event",
+  "EventTarget",
+  "File",
+  "FileList",
+  "FileReader",
+  "FocusEvent",
+  "Headers",
+  "HtmlElement",
+  "HtmlInputElement",
+  "HtmlSelectElement",
+  "HtmlTextAreaElement",
+  "KeyboardEvent",
+  "Location",
+  "MessageEvent",
+  "MouseEvent",
+  "Node",
+  "ObserverCallback",
+  "PointerEvent",
+  "ReferrerPolicy",
+  "Request",
+  "RequestCache",
+  "RequestCredentials",
+  "RequestInit",
+  "RequestMode",
+  "RequestRedirect",
+  "Response",
+  "Storage",
+  "Text",
+  "TouchEvent",
+  "UiEvent",
+  "Url",
+  "WebSocket",
+  "WheelEvent",
+  "Window",
+  "Worker",
+  "WorkerGlobalScope",
+  "WorkerOptions",
+]
+
+# Changes here must be reflected in `build.rs`
 [target.'cfg(all(target_arch = "wasm32", not(target_os="wasi"), not(cargo_web)))'.dependencies]
 wasm-bindgen = "0.2.58"
 
+# Changes here must be reflected in `build.rs`
 [target.'cfg(all(target_arch = "wasm32", not(target_os="wasi"), not(cargo_web)))'.dev-dependencies]
 wasm-bindgen-test = "0.3.4"
 base64 = "0.11.0"
@@ -57,9 +122,10 @@ rmp-serde = "0.14.0"
 bincode = "~1.2.1"
 
 [features]
-default = ["services", "agent"]
+default = []
+std_web = ["stdweb"]
+web_sys = ["console_error_panic_hook", "futures", "gloo", "js-sys", "web-sys", "wasm-bindgen", "wasm-bindgen-futures"]
 doc_test = []
-web_test = []
 wasm_test = []
 services = []
 agent = ["bincode"]

build.rs

@@ -1,9 +1,28 @@
 use std::env;
 
 pub fn main() {
-    let target_arch = env::var("CARGO_CFG_TARGET_ARCH").unwrap_or_default();
+    if cfg!(all(feature = "web_sys", feature = "std_web")) {
+        panic!("Yew does not allow the `web_sys` and `std_web` cargo features to be used simultaneously");
+    } else if cfg!(not(any(feature = "web_sys", feature = "std_web"))) {
+        panic!("Yew requires selecting either the `web_sys` or `std_web` cargo feature");
+    }
+
+    let target_os = env::var("CARGO_CFG_TARGET_OS").unwrap_or_default();
+    let using_wasi = target_os == "wasi";
+
     let cargo_web = env::var("COMPILING_UNDER_CARGO_WEB").unwrap_or_default();
-    if target_arch == "wasm32" && cargo_web != "1" {
-        println!("cargo:rustc-cfg=feature=\"wasm_bindgen_test\"");
+    let using_cargo_web = cargo_web == "1";
+    if using_cargo_web && cfg!(feature = "web_sys") {
+        panic!("cargo-web is not compatible with web-sys");
+    }
+
+    let target_arch = env::var("CARGO_CFG_TARGET_ARCH").unwrap_or_default();
+    let using_wasm_bindgen = target_arch == "wasm32" && !using_cargo_web && !using_wasi;
+    if !using_wasm_bindgen && cfg!(all(feature = "web_sys", not(feature = "doc_test"))) {
+        let target = env::var("TARGET").unwrap_or_default();
+        panic!(
+            "Selected target `{}` is not compatible with web-sys",
+            target
+        );
     }
 }

ci/check_examples.sh

@@ -10,12 +10,12 @@ cd examples/showcase
 
 if [ "$emscripten_supported" == "0" ]; then
   # TODO - Emscripten builds are broken on rustc > 1.39.0
-  cargo web build --target asmjs-unknown-emscripten
-  cargo web build --target wasm32-unknown-emscripten
+  cargo web build --target asmjs-unknown-emscripten --features std_web
+  cargo web build --target wasm32-unknown-emscripten --features std_web
 fi
 
-# TODO showcase doesn't support wasm-bindgen yet
-cargo web build --target wasm32-unknown-unknown
+cargo web build --target wasm32-unknown-unknown --features std_web
+cargo build --target wasm32-unknown-unknown --features web_sys
 
 # Reset cwd
 cd ../..

ci/run_checks.sh

@@ -8,4 +8,5 @@ fi
 
 set -euxo pipefail
 cargo fmt --all -- --check
-cargo clippy -- --deny=warnings
+cargo clippy --features std_web -- --deny=warnings
+cargo clippy --target wasm32-unknown-unknown --features web_sys -- --deny=warnings

ci/run_tests.sh

@@ -5,12 +5,16 @@ set -euxo pipefail # https://vaneyckt.io/posts/safer_bash_scripts_with_set_euxo_
 
 if [ "$emscripten_supported" == "0" ]; then
   # TODO - Emscripten builds are broken on rustc > 1.39.0
-  cargo web test --features web_test --target asmjs-unknown-emscripten
-  cargo web test --features web_test --target wasm32-unknown-emscripten
+  cargo web test --target asmjs-unknown-emscripten --features std_web
+  cargo web test --target wasm32-unknown-emscripten --features std_web
 fi
 
-cargo test --features wasm_test --target wasm32-unknown-unknown
-cargo test --test macro_test
-cargo test --test derive_props_test
-cargo test --doc --all-features
-(cd crates/macro && cargo test --doc)
+cargo test --target wasm32-unknown-unknown --features wasm_test,std_web
+cargo test --target wasm32-unknown-unknown --features wasm_test,web_sys
+cargo test --doc --features doc_test,wasm_test,yaml,msgpack,cbor,std_web
+cargo test --doc --features doc_test,wasm_test,yaml,msgpack,cbor,web_sys
+
+(cd crates/macro \
+  && cargo test --test macro_test \
+  && cargo test --test derive_props_test \
+  && cargo test --doc)

crates/macro/Cargo.toml

@@ -25,8 +25,11 @@ proc-macro2 = "1.0"
 quote = "1.0"
 syn = { version = "1.0", features = ["full", "extra-traits"] }
 
+# testing
 [dev-dependencies]
-yew = { path = "../.." }
+rustversion = "1.0"
+trybuild = "1.0"
+yew = { path = "../..", features = ["std_web"] }
 
 [build-dependencies]
 

tests/derive_props/fail.stderr → crates/macro/tests/derive_props/fail.stderr

@@ -51,6 +51,10 @@ error[E0599]: no method named `build` found for type `t3::PropsBuilder<t3::Props
 ...
 35 |         Props::builder().build();
    |                          ^^^^^ method not found in `t3::PropsBuilder<t3::PropsBuilderStep_missing_required_prop_value>`
+   |
+   = help: items from traits can only be used if the trait is implemented and in scope
+   = note: the following trait defines an item `build`, perhaps you need to implement it:
+           candidate #1: `proc_macro::bridge::server::TokenStreamBuilder`
 
 error[E0599]: no method named `b` found for type `t4::PropsBuilder<t4::PropsBuilderStep_missing_required_prop_a>` in the current scope
   --> $DIR/fail.rs:49:26

tests/derive_props_test.rs → crates/macro/tests/derive_props_test.rs

@@ -1,5 +1,5 @@
 #[allow(dead_code)]
-#[rustversion::attr(stable(1.41.0), cfg_attr(not(feature = "web_test"), test))]
+#[rustversion::attr(stable(1.41.0), test)]
 fn tests() {
     let t = trybuild::TestCases::new();
     t.pass("tests/derive_props/pass.rs");

tests/macro/html-component-fail.stderr → crates/macro/tests/macro/html-component-fail.stderr

@@ -197,6 +197,10 @@ error[E0599]: no method named `string` found for type `ChildPropertiesBuilder<Ch
 ...
 72 |     html! { <Child string="abc" /> };
    |                    ^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
+   |
+   = help: items from traits can only be used if the trait is implemented and in scope
+   = note: the following trait defines an item `string`, perhaps you need to implement it:
+           candidate #1: `proc_macro::bridge::server::Literal`
 
 error[E0599]: no method named `children` found for type `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
   --> $DIR/html-component-fail.rs:76:5
@@ -218,6 +222,9 @@ error[E0599]: no method named `build` found for type `ChildContainerPropertiesBu
 78 |     html! { <ChildContainer /> };
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
    |
+   = help: items from traits can only be used if the trait is implemented and in scope
+   = note: the following trait defines an item `build`, perhaps you need to implement it:
+           candidate #1: `proc_macro::bridge::server::TokenStreamBuilder`
    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error[E0599]: no method named `build` found for type `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>` in the current scope
@@ -229,6 +236,9 @@ error[E0599]: no method named `build` found for type `ChildContainerPropertiesBu
 79 |     html! { <ChildContainer></ChildContainer> };
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
    |
+   = help: items from traits can only be used if the trait is implemented and in scope
+   = note: the following trait defines an item `build`, perhaps you need to implement it:
+           candidate #1: `proc_macro::bridge::server::TokenStreamBuilder`
    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VChild<Child>: std::convert::From<&str>` is not satisfied

tests/macro_test.rs → crates/macro/tests/macro_test.rs

@@ -1,5 +1,5 @@
 #[allow(dead_code)]
-#[rustversion::attr(stable(1.41.0), cfg_attr(not(feature = "web_test"), test))]
+#[rustversion::attr(stable(1.41.0), test)]
 fn tests() {
     let t = trybuild::TestCases::new();
 

examples/Cargo.toml

@@ -1,28 +1,38 @@
 [workspace]
 members = [
-  "counter",
   "crm",
   "custom_components",
   "dashboard",
-  "node_refs",
-  "file_upload",
   "fragments",
   "futures",
   "game_of_life",
-  "inner_html",
-  "js_callback",
   "large_table",
   "minimal",
-  "mount_point",
-  "multi_thread",
   "nested_list",
-  "npm_and_rest",
+  "pub_sub",
   "server",
   "showcase",
   "textarea",
   "timer",
-  "todomvc",
-  "two_apps",
-  "pub_sub",
-  "webgl"
+  "webgl",
+  "std_web/counter",
+  "std_web/file_upload",
+  "std_web/inner_html",
+  "std_web/js_callback",
+  "std_web/mount_point",
+  "std_web/multi_thread",
+  "std_web/node_refs",
+  "std_web/npm_and_rest",
+  "std_web/todomvc",
+  "std_web/two_apps",
+  "web_sys/counter",
+  "web_sys/file_upload",
+  "web_sys/inner_html",
+  "web_sys/js_callback",
+  "web_sys/mount_point",
+  "web_sys/multi_thread",
+  "web_sys/node_refs",
+  "web_sys/npm_and_rest",
+  "web_sys/todomvc",
+  "web_sys/two_apps",
 ]