Merge pull request #180 from hecrj/feature/web-styling

Custom styling for `iced_web`

7 files changed, 85 insertions, 37 deletions

diff --git a/examples/pokedex/Cargo.toml b/examples/pokedex/Cargo.toml
index 76a3a82f..c1e3edb5 100644
--- a/examples/pokedex/Cargo.toml
+++ b/examples/pokedex/Cargo.toml
@@ -6,9 +6,13 @@ edition = "2018"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["image"] }
-iced_futures = { path = "../../futures", features = ["async-std"] }
-surf = "1.0"
-rand = "0.7"
+iced = { path = "../..", features = ["image", "debug", "tokio"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
+rand = { version = "0.7", features = ["wasm-bindgen"] }
+
+[dependencies.reqwest]
+version = "0.10"
+git = "https://github.com/hecrj/reqwest.git"
+branch = "feature/wasm-deserialize-json"
+features = ["json"]
diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs
index 283437b2..4449b901 100644
--- a/examples/pokedex/src/main.rs
+++ b/examples/pokedex/src/main.rs
@@ -27,7 +27,7 @@ enum Message {
 }
 
 impl Application for Pokedex {
-    type Executor = iced_futures::executor::AsyncStd;
+    type Executor = iced::executor::Default;
     type Message = Message;
 
     fn new() -> (Pokedex, Command<Message>) {
@@ -79,6 +79,7 @@ impl Application for Pokedex {
     fn view(&mut self) -> Element<Message> {
         let content = match self {
             Pokedex::Loading => Column::new()
+                .width(Length::Shrink)
                 .push(Text::new("Searching for Pokémon...").size(40)),
             Pokedex::Loaded { pokemon, search } => Column::new()
                 .max_width(500)
@@ -166,19 +167,21 @@ impl Pokemon {
         }
 
         let id = {
-            let mut rng = rand::thread_rng();
+            let mut rng = rand::rngs::OsRng::default();
 
             rng.gen_range(0, Pokemon::TOTAL)
         };
 
-        let url = format!("https://pokeapi.co/api/v2/pokemon-species/{}", id);
-        let sprite = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{}.png", id);
+        let fetch_entry = async {
+            let url =
+                format!("https://pokeapi.co/api/v2/pokemon-species/{}", id);
 
-        let (entry, sprite): (Entry, _) = futures::future::try_join(
-            surf::get(&url).recv_json(),
-            surf::get(&sprite).recv_bytes(),
-        )
-        .await?;
+            reqwest::get(&url).await?.json().await
+        };
+
+        let (entry, image): (Entry, _) =
+            futures::future::try_join(fetch_entry, Self::fetch_image(id))
+                .await?;
 
         let description = entry
             .flavor_text_entries
@@ -195,9 +198,23 @@ impl Pokemon {
                 .chars()
                 .map(|c| if c.is_control() { ' ' } else { c })
                 .collect(),
-            image: image::Handle::from_memory(sprite),
+            image,
         })
     }
+
+    async fn fetch_image(id: u16) -> Result<image::Handle, reqwest::Error> {
+        let url = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{}.png", id);
+
+        #[cfg(not(target_arch = "wasm32"))]
+        {
+            let bytes = reqwest::get(&url).await?.bytes().await?;
+
+            Ok(image::Handle::from_memory(bytes.as_ref().to_vec()))
+        }
+
+        #[cfg(target_arch = "wasm32")]
+        Ok(image::Handle::from_path(url))
+    }
 }
 
 #[derive(Debug, Clone)]
@@ -206,9 +223,9 @@ enum Error {
     LanguageError,
 }
 
-impl From<surf::Exception> for Error {
-    fn from(exception: surf::Exception) -> Error {
-        dbg!(&exception);
+impl From<reqwest::Error> for Error {
+    fn from(error: reqwest::Error) -> Error {
+        dbg!(&error);
 
         Error::APIError
     }
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index 50095ec7..47408624 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -104,6 +104,7 @@ impl Sandbox for Styling {
             "Toggle me!",
             Message::CheckboxToggled,
         )
+        .width(Length::Fill)
         .style(self.theme);
 
         let content = Column::new()
diff --git a/examples/todos/Cargo.toml b/examples/todos/Cargo.toml
index 21acd5d6..f945cde5 100644
--- a/examples/todos/Cargo.toml
+++ b/examples/todos/Cargo.toml
@@ -6,13 +6,18 @@ edition = "2018"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
-iced_futures = { path = "../../futures", features = ["async-std"] }
-async-std = "1.0"
+iced = { path = "../..", features = ["async-std"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+async-std = "1.0"
 directories = "2.0"
 
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+web-sys = { version = "0.3", features = ["Window", "Storage"] }
+wasm-timer = "0.2"
+
 [package.metadata.deb]
 assets = [
     ["target/release/todos", "usr/bin/iced-todos", "755"],
diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs
index bfae5e88..7e866b19 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -38,7 +38,7 @@ enum Message {
 }
 
 impl Application for Todos {
-    type Executor = iced_futures::executor::AsyncStd;
+    type Executor = iced::executor::Default;
     type Message = Message;
 
     fn new() -> (Todos, Command<Message>) {
@@ -377,6 +377,7 @@ impl Controls {
             )
             .push(
                 Row::new()
+                    .width(Length::Shrink)
                     .spacing(10)
                     .push(filter_button(
                         all_button,
@@ -493,6 +494,7 @@ enum SaveError {
     FormatError,
 }
 
+#[cfg(not(target_arch = "wasm32"))]
 impl SavedState {
     fn path() -> std::path::PathBuf {
         let mut path = if let Some(project_dirs) =
@@ -555,6 +557,41 @@ impl SavedState {
     }
 }
 
+#[cfg(target_arch = "wasm32")]
+impl SavedState {
+    fn storage() -> Option<web_sys::Storage> {
+        let window = web_sys::window()?;
+
+        window.local_storage().ok()?
+    }
+
+    async fn load() -> Result<SavedState, LoadError> {
+        let storage = Self::storage().ok_or(LoadError::FileError)?;
+
+        let contents = storage
+            .get_item("state")
+            .map_err(|_| LoadError::FileError)?
+            .ok_or(LoadError::FileError)?;
+
+        serde_json::from_str(&contents).map_err(|_| LoadError::FormatError)
+    }
+
+    async fn save(self) -> Result<(), SaveError> {
+        let storage = Self::storage().ok_or(SaveError::FileError)?;
+
+        let json = serde_json::to_string_pretty(&self)
+            .map_err(|_| SaveError::FormatError)?;
+
+        storage
+            .set_item("state", &json)
+            .map_err(|_| SaveError::WriteError)?;
+
+        let _ = wasm_timer::Delay::new(std::time::Duration::from_secs(2)).await;
+
+        Ok(())
+    }
+}
+
 mod style {
     use iced::{button, Background, Color, Vector};
 
diff --git a/examples/tour/Cargo.toml b/examples/tour/Cargo.toml
index 45105c31..96749e90 100644
--- a/examples/tour/Cargo.toml
+++ b/examples/tour/Cargo.toml
@@ -8,6 +8,3 @@ publish = false
 [dependencies]
 iced = { path = "../..", features = ["image", "debug"] }
 env_logger = "0.7"
-
-[target.'cfg(target_arch = "wasm32")'.dependencies]
-wasm-bindgen = "0.2.51"
diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index 43c7e50f..800254ed 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -779,16 +779,3 @@ mod style {
         }
     }
 }
-
-// This should be gracefully handled by Iced in the future. Probably using our
-// own proc macro, or maybe the whole process is streamlined by `wasm-pack` at
-// some point.
-#[cfg(target_arch = "wasm32")]
-mod wasm {
-    use wasm_bindgen::prelude::*;
-
-    #[wasm_bindgen(start)]
-    pub fn run() {
-        super::main()
-    }
-}