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 6e3f101dbedde2142f041467a8ae40ef5e3920c5.

* 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 8abdc9cf2b014ab61fef2c48d1af8927d9a5a330.

* Revert "Remove leftover files."

This reverts commit 188c6eb9693881c9987061de8deb29c6f4c613a4.

* 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]
 

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

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");

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

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

examples/build_all.sh

@@ -7,31 +7,102 @@ function ctrl_c() {
     kill $PID
 }
 
-function build() {
+function build_std_web() {
     for example in */ ; do
         if [[ $example == server* ]]; then
             continue
         fi
-        echo "Building: $example"
-        cd $example
-        cargo update
-        cargo web build --target wasm32-unknown-unknown
-        cd ..
+        if [[ $example == static* ]]; then
+            continue
+        fi
+        if [[ $example == web_sys* ]]; then
+            continue
+        fi
+        if [[ $example == std_web* ]]; then
+            build_std_web()
+        else
+            echo "Building: $example"
+            cd $example
+            cargo update
+            cargo web build --target wasm32-unknown-unknown
+            cd ..
+        fi
     done
 }
 
-function run() {
+function build_web_sys() {
+    for example in */ ; do
+        if [[ $example == server* ]]; then
+            continue
+        fi
+        if [[ $example == static* ]]; then
+            continue
+        fi
+        if [[ $example == std_web* ]]; then
+            continue
+        fi
+        if [[ $example == web_sys* ]]; then
+            build_web_sys()
+        else
+            echo "Building: $example"
+            cd $example
+            cargo update
+            cargo build --target wasm32-unknown-unknown
+            wasm-bindgen --target web --no-typescript --out-dir ../static/ --out-name wasm ../target/wasm32-unknown-unknown/debug/$example.wasm
+            cd ..
+        fi
+    done
+}
+
+function run_std_web() {
     trap ctrl_c INT
     for example in */ ; do
         if [[ $example == server* ]]; then
             continue
         fi
-        echo "Running: $example"
-        cd $example
-        cargo web start --target wasm32-unknown-unknown &
-        PID=$!
-        wait $PID
-        cd ..
+        if [[ $example == static* ]]; then
+            continue
+        fi
+        if [[ $example == web_sys* ]]; then
+            continue
+        fi
+        if [[ $example == std_web* ]]; then
+            run_std_web()
+        else
+            echo "Running: $example"
+            cd $example
+            cargo web start --target wasm32-unknown-unknown &
+            PID=$!
+            wait $PID
+            cd ..
+        fi
+    done
+}
+
+function run_web_sys() {
+    trap ctrl_c INT
+    for example in */ ; do
+        if [[ $example == server* ]]; then
+            continue
+        fi
+        if [[ $example == static* ]]; then
+            continue
+        fi
+        if [[ $example == std_web* ]]; then
+            continue
+        fi
+        if [[ $example == web_sys* ]]; then
+            run_web_sys()
+        else
+            echo "Running: $example"
+            cd $example
+            cargo build --target wasm32-unknown-unknown
+            wasm-bindgen --target web --no-typescript --out-dir ../static/ --out-name wasm ../target/wasm32-unknown-unknown/debug/$example.wasm
+            http -r ../static/
+            PID=$!
+            wait $PID
+            cd ..
+        fi
     done
 }
 
@@ -51,16 +122,19 @@ case "$1" in
     --help)
         echo "Available commands: build, run, clean"
     ;;
-    build)
-        build
+    build_std_web)
+        build_std_web
     ;;
-    run)
-        run
+    build_web_sys)
+        build_web_sys
+    ;;
+    run_std_web)
+        run_std_web
+    ;;
+    run_web_sys)
+        run_web_sys
     ;;
     clean)
         clean
     ;;
-    *)
-        build
-    ;;
 esac

examples/counter/src/main.rs

@@ -1,3 +0,0 @@
-fn main() {
-    yew::start_app::<counter::Model>();
-}

examples/crm/Cargo.toml

@@ -9,3 +9,7 @@ serde = "1"
 serde_derive = "1"
 yew = { path = "../.." }
 pulldown-cmark = "0.1.2"
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/crm/src/lib.rs

@@ -64,7 +64,7 @@ impl Component for Model {
     type Properties = ();
 
     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let storage = StorageService::new(Area::Local);
+        let storage = StorageService::new(Area::Local).expect("storage was disabled by the user");
         let Json(database) = storage.restore(KEY);
         let database = database.unwrap_or_else(|_| Database {
             clients: Vec::new(),

examples/custom_components/Cargo.toml

@@ -6,3 +6,7 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../.." }
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/dashboard/Cargo.toml

@@ -9,3 +9,7 @@ anyhow = "1"
 serde = "1"
 serde_derive = "1"
 yew = { path = "../..", features = ["toml"] }
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/dashboard/src/lib.rs

@@ -91,9 +91,9 @@ impl Model {
         );
         let request = Request::get("/data.json").body(Nothing).unwrap();
         if binary {
-            self.fetch_service.fetch_binary(request, callback)
+            self.fetch_service.fetch_binary(request, callback).unwrap()
         } else {
-            self.fetch_service.fetch(request, callback)
+            self.fetch_service.fetch(request, callback).unwrap()
         }
     }
 
@@ -111,9 +111,9 @@ impl Model {
         );
         let request = Request::get("/data.toml").body(Nothing).unwrap();
         if binary {
-            self.fetch_service.fetch_binary(request, callback)
+            self.fetch_service.fetch_binary(request, callback).unwrap()
         } else {
-            self.fetch_service.fetch(request, callback)
+            self.fetch_service.fetch(request, callback).unwrap()
         }
     }
 }

examples/file_upload/src/main.rs

@@ -1,3 +0,0 @@
-fn main() {
-    yew::start_app::<file_upload::Model>();
-}

examples/fragments/Cargo.toml

@@ -6,3 +6,7 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../.." }
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/futures/Cargo.toml

@@ -15,7 +15,7 @@ yew = { path = "../.." }
 wasm-bindgen-futures = "0.4.3"
 
 [dependencies.web-sys]
-version = "0.3.30"
+version = "0.3.35"
 features = [
   'Headers',
   'Request',
@@ -27,3 +27,7 @@ features = [
 
 [target.'cfg(all(target_arch = "wasm32", not(cargo_web)))'.dependencies]
 wasm-bindgen = "0.2.58"
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/futures/README.md

@@ -7,8 +7,8 @@ Because this example uses features not allowed by cargo web, it cannot be includ
 This example requires rustc v1.39.0 or above to compile due to its use of async/.await syntax.
 
 ```sh
-wasm-pack build --target web && rollup ./main.js --format iife --file ./pkg/bundle.js && python -m SimpleHTTPServer 8080
+wasm-pack build --target web --out-dir ../static/ --out-name wasm -- --features (web_sys|std_web) && python -m SimpleHTTPServer 8080
 ```
 This will compile the project, bundle up the compiler output and static assets, and start a http server on port 8080 so you can access the example at localhost:8080.
 
-It is expected that you have a setup with wasm-pack, rollup, and python installed.
+It is expected that you have a setup with wasm-pack and python installed.

examples/futures/index.html

@@ -1,10 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <title>Yew • Futures</title>
-</head>
-<body>
-<script src="/pkg/bundle.js"></script>
-</body>
-</html>

examples/futures/main.js

@@ -1,6 +0,0 @@
-import init, { run_app } from './pkg/futures.js';
-async function main() {
-   await init('./pkg/futures_bg.wasm');
-   run_app();
-}
-main()

examples/futures/src/lib.rs

@@ -136,7 +136,7 @@ impl Component for Model {
     }
 }
 
-#[wasm_bindgen]
+#[wasm_bindgen(start)]
 pub fn run_app() {
     yew::start_app::<Model>();
 }

examples/game_of_life/Cargo.toml

@@ -7,7 +7,11 @@ authors = ["Diego Cardoso <dige0card0s0@hotmail.com>",
 edition = "2018"
 
 [dependencies]
-rand = { version = "0.6.5", features = ["stdweb"] }
+rand = "0.6.5"
 log = "0.4"
-web_logger = "0.1"
+web_logger = "0.2"
 yew = { path = "../.." }
+
+[features]
+std_web = ["rand/stdweb", "yew/std_web"]
+web_sys = ["rand/wasm-bindgen", "yew/web_sys"]

examples/inner_html/Cargo.toml

@@ -1,9 +0,0 @@
-[package]
-name = "inner_html"
-version = "0.1.0"
-authors = ["Garrett Berg <vitiral@gmail.com>"]
-edition = "2018"
-
-[dependencies]
-stdweb = "0.4.20"
-yew = { path = "../.." }

examples/js_callback/src/main.rs

@@ -1,3 +0,0 @@
-fn main() {
-    yew::start_app::<js_callback::Model>();
-}

examples/large_table/Cargo.toml

@@ -6,3 +6,7 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../.." }
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/minimal/Cargo.toml

@@ -6,3 +6,7 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../.." }
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/mount_point/Cargo.toml

@@ -1,9 +0,0 @@
-[package]
-name = "mount_point"
-version = "0.1.0"
-authors = ["Ben Berman <ben@standardbots.com>"]
-edition = "2018"
-
-[dependencies]
-stdweb = "0.4.20"
-yew = { path = "../.." }

examples/multi_thread/src/bin/main.rs

@@ -1,4 +0,0 @@
-fn main() {
-    web_logger::init();
-    yew::start_app::<multi_thread::Model>();
-}

examples/multi_thread/static/bin

@@ -1 +0,0 @@
-../../target/wasm32-unknown-unknown/release

examples/nested_list/Cargo.toml

@@ -8,3 +8,7 @@ edition = "2018"
 log = "0.4"
 web_logger = "0.2"
 yew = { path = "../.." }
+
+[features]
+std_web = ["yew/std_web"]
+web_sys = ["yew/web_sys"]

examples/node_refs/src/main.rs

@@ -1,3 +0,0 @@
-fn main() {
-    yew::start_app::<node_refs::Model>();
-}

examples/npm_and_rest/src/main.rs

@@ -1,3 +0,0 @@
-fn main() {
-    yew::start_app::<npm_and_rest::Model>();
-}

examples/showcase/Cargo.toml

@@ -5,23 +5,69 @@ authors = ["Denis Kolodin <deniskolodin@gmail.com>", "Limira"]
 edition = "2018"
 
 [dependencies]
+cfg-if = "0.1"
 log = "0.4"
-web_logger = "0.1"
+web_logger = "0.2"
 strum = "0.13"
 strum_macros = "0.13"
 yew = { path = "../.." }
-counter = { path = "../counter" }
+counter_std_web = { path = "../std_web/counter", optional = true }
+counter_web_sys = { path = "../web_sys/counter", optional = true }
 crm = { path = "../crm" }
 custom_components = { path = "../custom_components" }
 dashboard = { path = "../dashboard" }
-node_refs = { path = "../node_refs" }
+node_refs_std_web = { path = "../std_web/node_refs", optional = true }
+node_refs_web_sys = { path = "../web_sys/node_refs", optional = true }
 fragments = { path = "../fragments" }
 game_of_life = { path = "../game_of_life" }
-inner_html = { path = "../inner_html" }
+inner_html_std_web = { path = "../std_web/inner_html", optional = true }
+inner_html_web_sys = { path = "../web_sys/inner_html", optional = true }
 large_table = { path = "../large_table" }
-mount_point = { path = "../mount_point" }
-npm_and_rest = { path = "../npm_and_rest" }
+mount_point_std_web = { path = "../std_web/mount_point", optional = true }
+mount_point_web_sys = { path = "../web_sys/mount_point", optional = true }
+npm_and_rest_std_web = { path = "../std_web/npm_and_rest", optional = true }
+npm_and_rest_web_sys = { path = "../web_sys/npm_and_rest", optional = true }
 textarea = { path = "../textarea" }
 timer = { path = "../timer" }
-todomvc = { path = "../todomvc" }
-two_apps = { path = "../two_apps" }
+todomvc_std_web = { path = "../std_web/todomvc", optional = true }
+todomvc_web_sys = { path = "../web_sys/todomvc", optional = true }
+two_apps_std_web = { path = "../std_web/two_apps", optional = true }
+two_apps_web_sys = { path = "../web_sys/two_apps", optional = true }
+
+[features]
+std_web = [
+  "yew/std_web",
+  "counter_std_web",
+  "crm/std_web",
+  "custom_components/std_web",
+  "dashboard/std_web",
+  "node_refs_std_web",
+  "fragments/std_web",
+  "game_of_life/std_web",
+  "inner_html_std_web",
+  "large_table/std_web",
+  "mount_point_std_web",
+  "npm_and_rest_std_web",
+  "textarea/std_web",
+  "timer/std_web",
+  "todomvc_std_web",
+  "two_apps_std_web",
+]
+web_sys = [
+  "yew/web_sys",
+  "counter_web_sys",
+  "crm/web_sys",
+  "custom_components/web_sys",
+  "dashboard/web_sys",
+  "node_refs_web_sys",
+  "fragments/web_sys",
+  "game_of_life/web_sys",
+  "inner_html_web_sys",
+  "large_table/web_sys",
+  "mount_point_web_sys",
+  "npm_and_rest_web_sys",
+  "textarea/web_sys",
+  "timer/web_sys",
+  "todomvc_web_sys",
+  "two_apps_web_sys",
+]

examples/showcase/src/main.rs

@@ -1,5 +1,25 @@
 #![recursion_limit = "128"]
 
+cfg_if::cfg_if! {
+    if #[cfg(feature = "std_web")] {
+        use counter_std_web as counter;
+        use inner_html_std_web as inner_html;
+        use mount_point_std_web as mount_point;
+        use node_refs_std_web as node_refs;
+        use npm_and_rest_std_web as npm_and_rest;
+        use todomvc_std_web as todomvc;
+        use two_apps_std_web as two_apps;
+    } else if #[cfg(feature = "web_sys")] {
+        use counter_web_sys as counter;
+        use inner_html_web_sys as inner_html;
+        use mount_point_web_sys as mount_point;
+        use node_refs_web_sys as node_refs;
+        use npm_and_rest_web_sys as npm_and_rest;
+        use todomvc_web_sys as todomvc;
+        use two_apps_web_sys as two_apps;
+    }
+}
+
 use counter::Model as Counter;
 use crm::Model as Crm;
 use custom_components::Model as CustomComponents;

examples/static/.gitignore

@@ -0,0 +1,3 @@
+*.wasm
+*.js
+snippets/

examples/static/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Yew example</title>
+        <script type="module">
+			import init from "./wasm.js"
+			init()
+		</script>
+    </head>
+    <body></body>
+</html>

examples/std_web/counter/Cargo.toml

@@ -1,9 +1,9 @@
 [package]
-name = "counter"
+name = "counter_std_web"
 version = "0.1.1"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
 
 [dependencies]
 stdweb = "0.4.20"
-yew = { path = "../.." }
+yew = { path = "../../..", features = ["services", "std_web"] }

examples/std_web/counter/src/lib.rs

@@ -1,4 +1,4 @@
-#![recursion_limit = "128"]
+#![recursion_limit = "256"]
 
 use stdweb::web::Date;
 use yew::services::ConsoleService;

examples/std_web/counter/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    yew::start_app::<counter_std_web::Model>();
+}

examples/std_web/file_upload/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
-name = "file_upload"
+name = "file_upload_std_web"
 version = "0.1.0"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
 
 [dependencies]
-yew = { path = "../.." }
+yew = { path = "../../..", features = ["std_web"] }

examples/std_web/file_upload/src/lib.rs

@@ -49,10 +49,10 @@ impl Component for Model {
                     let task = {
                         if chunks {
                             let callback = self.link.callback(Msg::Chunk);
-                            self.reader.read_file_by_chunks(file, callback, 10)
+                            self.reader.read_file_by_chunks(file, callback, 10).unwrap()
                         } else {
                             let callback = self.link.callback(Msg::Loaded);
-                            self.reader.read_file(file, callback)
+                            self.reader.read_file(file, callback).unwrap()
                         }
                     };
                     self.tasks.push(task);

examples/std_web/file_upload/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    yew::start_app::<file_upload_std_web::Model>();
+}

examples/std_web/inner_html/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "inner_html_std_web"
+version = "0.1.0"
+authors = ["Garrett Berg <vitiral@gmail.com>"]
+edition = "2018"
+
+[dependencies]
+stdweb = "0.4.20"
+yew = { path = "../../..", features = ["std_web"] }
+
+[target.'cfg(all(target_arch = "wasm32", not(target_os="wasi"), not(cargo_web)))'.dependencies]
+wasm-bindgen = "0.2.58"

examples/std_web/js_callback/Cargo.toml

@@ -1,11 +1,11 @@
 [package]
-name = "js_callback"
+name = "js_callback_std_web"
 version = "0.1.0"
 authors = ["Scott Steele <scottlsteele@gmail.com>"]
 edition = "2018"
 
 [dependencies]
-yew = { path = "../.." }
+yew = { path = "../../..", features = ["std_web"] }
 stdweb = "^0.4.20"
 
 [target.'cfg(all(target_arch = "wasm32", not(cargo_web)))'.dependencies]

examples/std_web/js_callback/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    yew::start_app::<js_callback_std_web::Model>();
+}

examples/std_web/mount_point/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "mount_point_std_web"
+version = "0.1.0"
+authors = ["Ben Berman <ben@standardbots.com>"]
+edition = "2018"
+
+[dependencies]
+stdweb = "0.4.20"
+yew = { path = "../../..", features = ["std_web"] }
+
+[target.'cfg(all(target_arch = "wasm32", not(target_os="wasi"), not(cargo_web)))'.dependencies]
+wasm-bindgen = "0.2.58"

examples/std_web/mount_point/src/main.rs

@@ -1,7 +1,7 @@
 #[macro_use]
 extern crate stdweb;
 
-use mount_point::Model;
+use mount_point_std_web::Model;
 use stdweb::web::{document, IElement, INode, IParentNode};
 use yew::App;
 

examples/std_web/multi_thread/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "multi_thread"
+name = "multi_thread_std_web"
 version = "0.1.0"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
@@ -14,7 +14,7 @@ path = "src/bin/native_worker.rs"
 
 [dependencies]
 log = "0.4"
-web_logger = "0.1"
+web_logger = "0.2"
 serde = "1.0"
 serde_derive = "1.0"
-yew = { path = "../.." }
+yew = { path = "../../..", features = ["std_web"] }

examples/std_web/multi_thread/README.md

@@ -3,5 +3,5 @@
 You should compile a worker which have to be spawned in a separate thread:
 
 ```sh
-cargo web build --bin native_worker --release
+cargo web build --bin native_worker --release --features std_web
 ```

examples/std_web/multi_thread/src/bin/main.rs

@@ -0,0 +1,4 @@
+fn main() {
+    web_logger::init();
+    yew::start_app::<multi_thread_std_web::Model>();
+}

examples/std_web/multi_thread/src/bin/native_worker.rs

@@ -3,6 +3,6 @@ use yew::agent::Threaded;
 fn main() {
     web_logger::init();
     yew::initialize();
-    multi_thread::native_worker::Worker::register();
+    multi_thread_std_web::native_worker::Worker::register();
     yew::run_loop();
 }

examples/std_web/multi_thread/static/bin

@@ -0,0 +1 @@
+../../../target/wasm32-unknown-unknown/release

examples/std_web/node_refs/Cargo.toml

@@ -1,9 +1,9 @@
 [package]
-name = "node_refs"
+name = "node_refs_std_web"
 version = "0.1.0"
 authors = ["Justin Starry <justin.starry@icloud.com>"]
 edition = "2018"
 
 [dependencies]
-yew = { path = "../.." }
+yew = { path = "../../..", features = ["std_web"] }
 stdweb = "0.4.20"

examples/std_web/node_refs/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    yew::start_app::<node_refs_std_web::Model>();
+}

examples/std_web/npm_and_rest/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "npm_and_rest_std_web"
+version = "0.1.0"
+authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
+edition = "2018"
+
+[dependencies]
+anyhow = "1"
+serde = "1"
+serde_derive = "1"
+stdweb = "0.4.20"
+yew = { path = "../../..", features = ["std_web"] }
+
+[target.'cfg(all(target_arch = "wasm32", not(target_os="wasi"), not(cargo_web)))'.dependencies]
+wasm-bindgen = "0.2.58"

examples/std_web/npm_and_rest/src/gravatar.rs

@@ -45,6 +45,6 @@ impl GravatarService {
             }
         };
         let request = Request::get(url.as_str()).body(Nothing).unwrap();
-        self.web.fetch(request, handler.into())
+        self.web.fetch(request, handler.into()).unwrap()
     }
 }

examples/std_web/npm_and_rest/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    yew::start_app::<npm_and_rest_std_web::Model>();
+}