yewstack · jstarry · Apr 29, 2020 · Apr 28, 2020 · Apr 28, 2020 · Apr 28, 2020
diff --git a/Cargo.toml b/Cargo.toml
@@ -35,12 +35,13 @@ members = [
   "examples/dashboard",
   "examples/file_upload",
   "examples/fragments",
-  "examples/futures",
+  "examples/futures_wp",
   "examples/game_of_life",
   "examples/inner_html",
   "examples/js_callback",
   "examples/large_table",
   "examples/minimal",
+  "examples/minimal_wp",
   "examples/mount_point",
   "examples/multi_thread",
   "examples/nested_list",

diff --git a/ci/build_examples.sh b/ci/build_examples.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+# Script to build all examples in yew/examples 
+#
+# Not building yew-router nor yewtil examples
+
+# src: https://gist.github.com/fbucek/f986da3cc3a9bbbd1573bdcb23fed2e1
+set -e # error -> trap -> exit
+function info() { echo -e "[\033[0;34m $@ \033[0m]"; } # blue: [ info message ]
+function fail() { FAIL="true"; echo -e "[\033[0;31mFAIL\033[0m] $@"; } # red: [FAIL]
+trap 'LASTRES=$?; LAST=$BASH_COMMAND; if [[ LASTRES -ne 0 ]]; then fail "Command: \"$LAST\" exited with exit code: $LASTRES"; elif [ "$FAIL" == "true"  ]; then fail finished with error; else echo -e "[\033[0;32m Finished $@ \033[0m]";fi' EXIT
+SRCDIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )" # this source dir
+
+cd $SRCDIR/../examples # switch to examples folder 
+
+for EXAMPLE in *
+do  
+    if [[ $EXAMPLE ==  static ]] || [[ $EXAMPLE ==  server ]] || [[ $EXAMPLE ==  target ]]; then
+        echo -e "Skipping folder: $EXAMPLE"
+    elif [ -d ${EXAMPLE} ]; then
+        ./build.sh ${EXAMPLE} $@
+    fi
+done
diff --git a/examples/build.sh b/examples/build.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+
+# src: https://gist.github.com/fbucek/f986da3cc3a9bbbd1573bdcb23fed2e1
+set -e # error -> trap -> exit
+function info() { echo -e "[\033[0;34m $@ \033[0m]"; } # blue: [ info message ]
+function fail() { FAIL="true"; echo -e "[\033[0;31mFAIL\033[0m] $@"; } # red: [FAIL]
+trap 'LASTRES=$?; LAST=$BASH_COMMAND; if [[ LASTRES -ne 0 ]]; then fail "Command: \"$LAST\" exited with exit code: $LASTRES"; elif [ "$FAIL" == "true"  ]; then fail finished with error; else echo -e "[\033[0;32m Finished! Run $@ by serving the generated files in examples/static/ \033[0m]";fi' EXIT
+SRCDIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )" # this source dir
+
+cd $SRCDIR # ensure this script can be run from anywhere
+
+# When using $CARGO_TARGET_DIR -> binary is located in different folder
+# Necessary to locate build files for wasm-bindgen
+TARGET_DIR=$SRCDIR/../target/wasm32-unknown-unknown/debug
+if [ ! -z "$CARGO_TARGET_DIR" ]; then 
+    TARGET_DIR=$CARGO_TARGET_DIR/wasm32-unknown-unknown/debug
+fi
+
+EXAMPLE=$1
+cd $EXAMPLE
+
+# wasm-pack build
+if [[ $EXAMPLE == *_wp ]]; then 
+    info "Building: $EXAMPLE using wasm-pack"
+    # wasm-pack overwrites .gitignore -> save -> restore
+    cp $SRCDIR/static/.gitignore $SRCDIR/static/.gitignore.copy
+    wasm-pack build --debug --target web --out-name wasm --out-dir $SRCDIR/static/
+    rm $SRCDIR/static/.gitignore; mv $SRCDIR/static/.gitignore.copy $SRCDIR/static/.gitignore # restore .gitignore
+
+# multi_thrread build -> two binary/wasm files
+elif [[ $EXAMPLE == multi_thread ]]; then
+    info "Building: $EXAMPLE app using wasm-bindgen"
+    cargo build --target wasm32-unknown-unknown --bin multi_thread_app
+    wasm-bindgen --target web --no-typescript --out-dir $SRCDIR/static/ --out-name wasm $TARGET_DIR/multi_thread_app.wasm
+
+    info "Building: $EXAMPLE worker using wasm-bindgen"
+    cargo build --target wasm32-unknown-unknown --bin multi_thread_worker
+    wasm-bindgen --target no-modules --no-typescript --out-dir $SRCDIR/static/ --out-name worker $TARGET_DIR/multi_thread_worker.wasm
+
+else # Default wasm-bindgen build
+    info "Building: $EXAMPLE using wasm-bindgen"
+    cargo build --target wasm32-unknown-unknown 
+    wasm-bindgen --target web --no-typescript --out-dir $SRCDIR/static/ --out-name wasm $TARGET_DIR/$EXAMPLE.wasm
+fi
diff --git a/examples/counter/Cargo.toml b/examples/counter/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.1"
 authors = ["Denis Kolodin <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [dependencies]
 js-sys = "0.3"
 yew = { path = "../../yew" }
diff --git a/examples/crm/Cargo.toml b/examples/crm/Cargo.toml
@@ -9,10 +9,3 @@ serde = "1"
 serde_derive = "1"
 yew = { path = "../../yew" }
 pulldown-cmark = { version = "0.7.0", default-features = false }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/custom_components/Cargo.toml b/examples/custom_components/Cargo.toml
@@ -6,10 +6,3 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../../yew" }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/dashboard/Cargo.toml b/examples/dashboard/Cargo.toml
@@ -9,10 +9,3 @@ anyhow = "1"
 serde = "1"
 serde_derive = "1"
 yew = { path = "../../yew", features = ["toml"] }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/file_upload/Cargo.toml b/examples/file_upload/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.0"
 authors = ["Denis Kolodin <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [dependencies]
 js-sys = "0.3"
 yew = { path = "../../yew" }
diff --git a/examples/fragments/Cargo.toml b/examples/fragments/Cargo.toml
@@ -6,10 +6,3 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../../yew" }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/futures/Cargo.toml → examples/futures_wp/Cargo.toml b/examples/futures/Cargo.toml → examples/futures_wp/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "futures"
+name = "futures_wp"
 version = "0.1.0"
 authors = ["Henry Zimmerman <[email protected]>"]
 edition = "2018"

diff --git a/examples/futures/README.md → examples/futures_wp/README.md b/examples/futures/README.md → examples/futures_wp/README.md
diff --git a/examples/futures/src/lib.rs → examples/futures_wp/src/lib.rs b/examples/futures/src/lib.rs → examples/futures_wp/src/lib.rs
diff --git a/examples/game_of_life/Cargo.toml b/examples/game_of_life/Cargo.toml
@@ -11,10 +11,3 @@ rand = "0.7.3"
 log = "0.4"
 web_logger = "0.2"
 yew = { path = "../../yew" }
-
-[features]
-std_web = ["rand/stdweb", "yew/std_web"]
-web_sys = ["rand/wasm-bindgen", "yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/inner_html/Cargo.toml b/examples/inner_html/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.0"
 authors = ["Garrett Berg <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [dependencies]
 yew = { path = "../../yew" }
 

diff --git a/examples/js_callback/Cargo.toml b/examples/js_callback/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.0"
 authors = ["Scott Steele <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [dependencies]
 wasm-bindgen = "0.2.60"
 yew = { path = "../../yew" }
diff --git a/examples/large_table/Cargo.toml b/examples/large_table/Cargo.toml
@@ -6,10 +6,3 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../../yew" }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/minimal/Cargo.toml b/examples/minimal/Cargo.toml
@@ -7,9 +7,3 @@ edition = "2018"
 [dependencies]
 yew = { path = "../../yew" }
 
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/minimal/src/lib.rs b/examples/minimal/src/lib.rs
@@ -30,7 +30,7 @@ impl Component for Model {
     fn view(&self) -> Html {
         html! {
             <div>
-                <button onclick=self.link.callback(|_| Msg::Click)>{ "Click" }</button>
+                <button onclick=self.link.callback(|_| Msg::Click)>{ "Click ( wasm-bindgen )" }</button>
             </div>
         }
     }

diff --git a/examples/minimal_wp/Cargo.toml b/examples/minimal_wp/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "minimal_wp"
+version = "0.1.0"
+authors = ["Denis Kolodin <[email protected]>"]
+edition = "2018"
+
+[dependencies]
+yew = { path = "../../yew" }
+wasm-bindgen = "0.2"
+
+
+# requirement of wasm-pack which builds crates as libraries
+# it is required to have `#[wasm_bindgen(start)]` in lib.rs as starting point
+[lib]
+crate-type = ["cdylib", "rlib"]
diff --git a/examples/minimal_wp/src/lib.rs b/examples/minimal_wp/src/lib.rs
@@ -0,0 +1,43 @@
+use wasm_bindgen::prelude::*;
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
+
+pub struct Model {
+    link: ComponentLink<Self>,
+}
+
+pub enum Msg {
+    Click,
+}
+
+impl Component for Model {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model { link }
+    }
+
+    fn change(&mut self, _: Self::Properties) -> bool {
+        false
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Click => {}
+        }
+        true
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <div>
+                <button onclick=self.link.callback(|_| Msg::Click)>{ "Click ( wasm-pack )" }</button>
+            </div>
+        }
+    }
+}
+
+#[wasm_bindgen(start)]
+pub fn run_app() {
+    yew::start_app::<Model>();
+}
diff --git a/examples/mount_point/Cargo.toml b/examples/mount_point/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.0"
 authors = ["Ben Berman <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [dependencies]
 wasm-bindgen = "0.2"
 yew = { path = "../../yew" }

diff --git a/examples/multi_thread/Cargo.toml b/examples/multi_thread/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.0"
 authors = ["Denis Kolodin <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [[bin]]
 name = "multi_thread_app"
 path = "src/bin/app.rs"

diff --git a/examples/nested_list/Cargo.toml b/examples/nested_list/Cargo.toml
@@ -8,10 +8,3 @@ edition = "2018"
 log = "0.4"
 web_logger = "0.2"
 yew = { path = "../../yew" }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/node_refs/Cargo.toml b/examples/node_refs/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.0"
 authors = ["Justin Starry <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [dependencies]
 yew = { path = "../../yew" }
 web-sys = { version = "0.3", features = ["HtmlElement", "HtmlInputElement", "Node"] }
diff --git a/examples/npm_and_rest/Cargo.toml b/examples/npm_and_rest/Cargo.toml
@@ -4,9 +4,6 @@ version = "0.1.0"
 authors = ["Denis Kolodin <[email protected]>"]
 edition = "2018"
 
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 [dependencies]
 anyhow = "1"
 js-sys = "0.3"

diff --git a/examples/pub_sub/Cargo.toml b/examples/pub_sub/Cargo.toml
@@ -8,10 +8,3 @@ log = "0.4"
 web_logger = "0.2"
 serde = { version = "1.0", features = ["derive"] }
 yew = { path = "../../yew" }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]
diff --git a/examples/readme.md b/examples/readme.md
@@ -0,0 +1,39 @@
+# Yew Examples
+
+Use `build.sh` script to build examples. 
+
+Examples are prepared for `wasm-bindgen` except folders ending with `_wp` which are prepared for `wasm-pack`.
+
+- The examples do not use external bundlers and all use the same `static/index.html` after being built.
+- `wasm-bindgen` builds projects as binary crates (`main.rs`)
+- `wasm-pack` builds projects as library crates (`lib.rs`)
+
+For your own project, you may wish to check out the Yew [starter templates](https://yew.rs/docs/getting-started/starter-templates)
+
+
+## How to run
+
+```sh
+git clone https://github.com/yewstack/yew.git
+cd yew/examples
+./build.sh minimal # example subfolder
+python3 -m http.server --directory static # open localhost:8000 in browser
+```
+
+
+Note: [Visual Studio Code IDE](https://code.visualstudio.com/) has the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension which can be used to run examples in the browser with automatic reload. After installing, open the context menu on `index.html` -> `Open with Live Server`
+
+## Requirements
+
+Default way to build is using `wasm-bindgen` which comes with `wasm-pack`
+
+- Install using cargo: `cargo install wasm-pack`
+
+Install guides: [Rust](https://www.rust-lang.org/learn/get-started) and [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/)
+
+```bash
+# rust install
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+# wasm-pack install
+curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh;
+```
diff --git a/examples/static/.gitignore b/examples/static/.gitignore
@@ -1,3 +1,6 @@
 *.wasm
 *.js
+*.json
+*.ts
+*.md
 snippets/
diff --git a/examples/textarea/Cargo.toml b/examples/textarea/Cargo.toml
@@ -6,10 +6,3 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../../yew" }
-
-[features]
-std_web = ["yew/std_web"]
-web_sys = ["yew/web_sys"]
-
-[lib]
-crate-type = ["cdylib", "rlib"]