Make example work on web and update READMEs

examples/README.md

@@ -11,31 +11,60 @@ you want to learn about a specific release, check out [the release list].
 A simple UI tour showcasing different widgets that can be built using Iced. It
 also shows how the library can be integrated into an existing system.
 
-The example is built on top of [`ggez`], a game library for Rust. Currently, it
+The example can run both on native and web platforms, using the same GUI code!
-is using a [personal fork] to [add a `FontCache` type] and
+
-[fix some issues with HiDPI].
+The native renderer of the example is built on top of [`ggez`], a game library
+for Rust. Currently, it is using a [personal fork] to [add a `FontCache` type]
+and [fix some issues with HiDPI].
+
+The web version uses `iced_web` directly. This crate is still a work in
+progress. In particular, the styling of elements is not finished yet
+(text color, alignment, sizing, etc).
 
 The implementation consists of different modules:
-  - __[`tour`]__ contains the actual GUI code: __state__, __messages__,
+  - __[`tour`]__ contains the actual cross-platform GUI code: __state__,
-    __update logic__ and __view logic__.
+    __messages__, __update logic__ and __view logic__.
-  - __[`renderer`]__ implements a simple renderer for each of the used widgets on
+  - __[`iced_ggez`]__ implements a simple renderer for each of the used widgets
-    top of the graphics module of [`ggez`].
+    on top of the graphics module of [`ggez`].
-  - __[`widget`]__ re-exposes Iced's built-in widgets with the renderer type parameter
+  - __[`widget`]__ conditionally re-exposes the correct platform widgets based
-    replaced with the implemented [`renderer`], for convenience.
+    on the target architecture.
   - __[`main`]__ integrates Iced with [`ggez`] and connects the [`tour`] with
     the [`renderer`].
+  - __[`lib`]__ exposes the [`tour`] types and conditionally implements the
+    WebAssembly entrypoint in the [`web`] module.
+
+The conditional compilation awkwardness from targetting both native and web
+platforms should be handled seamlessly by the `iced` crate in the near future!
+
+If you want to run it as a native app:
 
 ```
-cargo run --package iced_ggez_tour
+cd examples/tour
+cargo run
+```
+
+If you want to run it on web, you will need [`wasm-pack`]:
+
+```
+cd examples/tour
+wasm-pack build --target web
+```
+
+Then, simply serve the directory with any HTTP server. For instance:
+
+```
+python3 -m http.server
 ```
 
 [![Tour - Iced][gui_gif]][gui_gfycat]
 
 [`ggez`]: https://github.com/ggez/ggez
 [`tour`]: tour/src/tour.rs
-[`renderer`]: tour/src/renderer
+[`iced_ggez`]: tour/src/iced_ggez
 [`widget`]: tour/src/widget.rs
 [`main`]: tour/src/main.rs
+[`lib`]: tour/src/lib.rs
+[`web`]: tour/src/web.rs
 [personal fork]: https://github.com/hecrj/ggez
 [add a `FontCache` type]: https://github.com/ggez/ggez/pull/679
 [fix some issues with HiDPI]: https://github.com/hecrj/ggez/commit/dfe2fd2423c51a6daf42c75f66dfaeaacd439fb1

examples/tour/Cargo.toml

@@ -8,9 +8,12 @@ repository = "https://github.com/hecrj/iced"
 edition = "2018"
 publish = false
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [[bin]]
-name = "ggez"
+name = "main"
-path = "src/iced_ggez/main.rs"
+path = "src/main.rs"
 
 [dependencies]
 futures-preview = "=0.3.0-alpha.18"

examples/tour/README.md

@@ -3,31 +3,60 @@
 A simple UI tour showcasing different widgets that can be built using Iced. It
 also shows how the library can be integrated into an existing system.
 
-The example is built on top of [`ggez`], a game library for Rust. Currently, it
+The example can run both on native and web platforms, using the same GUI code!
-is using a [personal fork] to [add a `FontCache` type] and
+
-[fix some issues with HiDPI].
+The native renderer of the example is built on top of [`ggez`], a game library
+for Rust. Currently, it is using a [personal fork] to [add a `FontCache` type]
+and [fix some issues with HiDPI].
+
+The web version uses `iced_web` directly. This crate is still a work in
+progress. In particular, the styling of elements is not finished yet
+(text color, alignment, sizing, etc).
 
 The implementation consists of different modules:
-  - __[`tour`]__ contains the actual GUI code: __state__, __messages__,
+  - __[`tour`]__ contains the actual cross-platform GUI code: __state__,
-    __update logic__ and __view logic__.
+    __messages__, __update logic__ and __view logic__.
-  - __[`renderer`]__ implements a simple renderer for each of the used widgets on
+  - __[`iced_ggez`]__ implements a simple renderer for each of the used widgets
-    top of the graphics module of [`ggez`].
+    on top of the graphics module of [`ggez`].
-  - __[`widget`]__ re-exposes Iced's built-in widgets with the renderer type parameter
+  - __[`widget`]__ conditionally re-exposes the correct platform widgets based
-    replaced with the implemented [`renderer`], for convenience.
+    on the target architecture.
   - __[`main`]__ integrates Iced with [`ggez`] and connects the [`tour`] with
     the [`renderer`].
+  - __[`lib`]__ exposes the [`tour`] types and conditionally implements the
+    WebAssembly entrypoint in the [`web`] module.
+
+The conditional compilation awkwardness from targetting both native and web
+platforms should be handled seamlessly by the `iced` crate in the near future!
+
+If you want to run it as a native app:
 
 ```
-cargo run --example tour
+cd examples/tour
+cargo run
+```
+
+If you want to run it on web, you will need [`wasm-pack`]:
+
+```
+cd examples/tour
+wasm-pack build --target web
+```
+
+Then, simply serve the directory with any HTTP server. For instance:
+
+```
+python3 -m http.server
 ```
 
 [![Tour - Iced][gui_gif]][gui_gfycat]
 
 [`ggez`]: https://github.com/ggez/ggez
-[`tour`]: tour.rs
+[`tour`]: src/tour.rs
-[`renderer`]: renderer
+[`iced_ggez`]: src/iced_ggez
-[`widget`]: widget.rs
+[`widget`]: src/widget.rs
-[`main`]: main.rs
+[`main`]: src/main.rs
+[`lib`]: src/lib.rs
+[`web`]: src/web.rs
 [personal fork]: https://github.com/hecrj/ggez
 [add a `FontCache` type]: https://github.com/ggez/ggez/pull/679
 [fix some issues with HiDPI]: https://github.com/hecrj/ggez/commit/dfe2fd2423c51a6daf42c75f66dfaeaacd439fb1

examples/tour/src/tour.rs

@@ -16,7 +16,7 @@ impl Tour {
             steps: Steps::new(),
             back_button: button::State::new(),
             next_button: button::State::new(),
-            debug: true,
+            debug: false,
         }
     }
 

web/src/widget/button.rs

@@ -2,7 +2,7 @@ use crate::{Bus, Element, Widget};
 
 use dodrio::bumpalo;
 
-pub type Button<'a, Message> = iced_core::Button<'a, Message>;
+pub use iced_core::button::*;
 
 impl<'a, Message> Widget<Message> for Button<'a, Message>
 where
@@ -29,6 +29,8 @@ where
             });
         }
 
+        // TODO: Complete styling
+
         node.finish()
     }
 }

web/src/widget/checkbox.rs

@@ -20,6 +20,7 @@ where
         let event_bus = bus.clone();
         let msg = (self.on_toggle)(!self.is_checked);
 
+        // TODO: Complete styling
         label(bump)
             .children(vec![
                 input(bump)

web/src/widget/column.rs

@@ -18,6 +18,7 @@ impl<'a, Message> Widget<Message> for Column<'a, Message> {
             .map(|element| element.widget.node(bump, publish))
             .collect();
 
+        // TODO: Complete styling
         div(bump)
             .attr("style", "display: flex; flex-direction: column")
             .children(children)

web/src/widget/image.rs

@@ -29,6 +29,8 @@ impl<'a, Message> Widget<Message> for Image<'a> {
             }
         }
 
+        // TODO: Complete styling
+
         image.finish()
     }
 }

web/src/widget/radio.rs

@@ -20,6 +20,7 @@ where
         let event_bus = bus.clone();
         let on_click = self.on_click;
 
+        // TODO: Complete styling
         label(bump)
             .attr("style", "display: block")
             .children(vec![

web/src/widget/row.rs

@@ -18,6 +18,7 @@ impl<'a, Message> Widget<Message> for Row<'a, Message> {
             .map(|element| element.widget.node(bump, publish))
             .collect();
 
+        // TODO: Complete styling
         div(bump)
             .attr("style", "display: flex; flex-direction: row")
             .children(children)

web/src/widget/slider.rs

@@ -2,9 +2,7 @@ use crate::{Bus, Element, Widget};
 
 use dodrio::bumpalo;
 
-pub type Slider<'a, Message> = iced_core::Slider<'a, Message>;
+pub use iced_core::slider::*;
-
-pub use iced_core::slider::State;
 
 impl<'a, Message> Widget<Message> for Slider<'a, Message>
 where
@@ -28,6 +26,7 @@ where
         let event_bus = bus.clone();
 
         // TODO: Make `step` configurable
+        // TODO: Complete styling
         label(bump)
             .children(vec![input(bump)
                 .attr("type", "range")

web/src/widget/text.rs

@@ -14,6 +14,7 @@ impl<'a, Message> Widget<Message> for Text {
         let content = bumpalo::format!(in bump, "{}", self.content);
         let size = bumpalo::format!(in bump, "font-size: {}px", self.size.unwrap_or(20));
 
+        // TODO: Complete styling
         p(bump)
             .attr("style", size.into_bump_str())
             .children(vec![text(content.into_bump_str())])