Draft widget nodes and wire interaction

src/widget/button.rs

@@ -40,9 +40,11 @@ use std::hash::Hash;
 /// ![Button drawn by Coffee's renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/button.png?raw=true)
 pub struct Button<'a, Message> {
     state: &'a mut State,
-    label: String,
+    /// The label of the button.
+    pub label: String,
     class: Class,
-    on_press: Option<Message>,
+    /// The message to produce when the button is pressed
+    pub on_press: Option<Message>,
     style: Style,
 }
 

src/widget/text.rs

@@ -29,8 +29,10 @@ use std::hash::Hash;
 /// ```
 #[derive(Debug, Clone)]
 pub struct Text<Color> {
-    content: String,
+    /// The text contents
-    size: Option<u16>,
+    pub content: String,
+    /// The text size
+    pub size: Option<u16>,
     color: Option<Color>,
     style: Style,
     horizontal_alignment: HorizontalAlignment,

web/src/bus.rs

@@ -0,0 +1,40 @@
+use crate::Application;
+
+use std::rc::Rc;
+
+#[derive(Clone)]
+pub struct Bus<Message> {
+    publish: Rc<Box<dyn Fn(Message, &mut dyn dodrio::RootRender)>>,
+}
+
+impl<Message> Bus<Message>
+where
+    Message: 'static,
+{
+    pub fn new() -> Self {
+        Self {
+            publish: Rc::new(Box::new(|message, root| {
+                let app = root.unwrap_mut::<Application<Message>>();
+
+                app.update(message)
+            })),
+        }
+    }
+
+    pub fn publish(&self, message: Message, root: &mut dyn dodrio::RootRender) {
+        (self.publish)(message, root);
+    }
+
+    pub fn map<B>(&self, mapper: Rc<Box<dyn Fn(B) -> Message>>) -> Bus<B>
+    where
+        B: 'static,
+    {
+        let publish = self.publish.clone();
+
+        Bus {
+            publish: Rc::new(Box::new(move |message, root| {
+                publish(mapper(message), root)
+            })),
+        }
+    }
+}

web/src/element.rs

@@ -1,4 +1,7 @@
-use crate::{Color, Widget};
+use crate::{Bus, Color, Widget};
+
+use dodrio::bumpalo;
+use std::rc::Rc;
 
 pub struct Element<'a, Message> {
     pub(crate) widget: Box<dyn Widget<Message> + 'a>,
@@ -11,7 +14,7 @@ impl<'a, Message> Element<'a, Message> {
         }
     }
 
-    pub fn explain(self, color: Color) -> Element<'a, Message> {
+    pub fn explain(self, _color: Color) -> Element<'a, Message> {
         self
     }
 
@@ -29,7 +32,7 @@ impl<'a, Message> Element<'a, Message> {
 
 struct Map<'a, A, B> {
     widget: Box<dyn Widget<A> + 'a>,
-    mapper: Box<dyn Fn(A) -> B>,
+    mapper: Rc<Box<dyn Fn(A) -> B>>,
 }
 
 impl<'a, A, B> Map<'a, A, B> {
@@ -39,9 +42,21 @@ impl<'a, A, B> Map<'a, A, B> {
     {
         Map {
             widget,
-            mapper: Box::new(mapper),
+            mapper: Rc::new(Box::new(mapper)),
         }
     }
 }
 
-impl<'a, A, B> Widget<B> for Map<'a, A, B> {}
+impl<'a, A, B> Widget<B> for Map<'a, A, B>
+where
+    A: 'static,
+    B: 'static,
+{
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        bus: &Bus<B>,
+    ) -> dodrio::Node<'b> {
+        self.widget.node(bump, &bus.map(self.mapper.clone()))
+    }
+}

web/src/lib.rs

@@ -1,9 +1,13 @@
+use dodrio::bumpalo;
 use futures::Future;
+use std::cell::RefCell;
 
+mod bus;
 mod color;
 mod element;
 mod widget;
 
+pub use bus::Bus;
 pub use color::Color;
 pub use element::Element;
 pub use iced::Align;
@@ -19,10 +23,54 @@ pub trait UserInterface {
 
     fn view(&mut self) -> Element<Self::Message>;
 
-    fn run(mut self)
+    fn run(self)
     where
-        Self: Sized,
+        Self: 'static + Sized,
     {
-        let element = self.view();
+        let window = web_sys::window().unwrap();
+        let document = window.document().unwrap();
+        let body = document.body().unwrap();
+
+        let app = Application::new(self);
+
+        let vdom = dodrio::Vdom::new(&body, app);
+        vdom.forget();
+    }
+}
+
+struct Application<Message> {
+    ui: RefCell<Box<dyn UserInterface<Message = Message>>>,
+}
+
+impl<Message> Application<Message> {
+    fn new(ui: impl UserInterface<Message = Message> + 'static) -> Self {
+        Self {
+            ui: RefCell::new(Box::new(ui)),
+        }
+    }
+
+    fn update(&mut self, message: Message) {
+        let mut ui = self.ui.borrow_mut();
+
+        // TODO: Resolve futures and publish resulting messages
+        let _ = ui.update(message);
+    }
+}
+
+impl<Message> dodrio::Render for Application<Message>
+where
+    Message: 'static,
+{
+    fn render<'a, 'bump>(
+        &'a self,
+        bump: &'bump bumpalo::Bump,
+    ) -> dodrio::Node<'bump>
+    where
+        'a: 'bump,
+    {
+        let mut ui = self.ui.borrow_mut();
+        let element = ui.view();
+
+        element.widget.node(bump, &Bus::new())
     }
 }

web/src/widget.rs

@@ -1,3 +1,6 @@
+use crate::Bus;
+use dodrio::bumpalo;
+
 pub mod button;
 pub mod slider;
 pub mod text;
@@ -17,4 +20,14 @@ pub use row::Row;
 pub use slider::Slider;
 pub use text::Text;
 
-pub trait Widget<Message> {}
+pub trait Widget<Message> {
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        _bus: &Bus<Message>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        div(bump).children(vec![text("WIP")]).finish()
+    }
+}

web/src/widget/button.rs

@@ -1,14 +1,42 @@
-use crate::{Element, Widget};
+use crate::{Bus, Element, Widget};
+use dodrio::bumpalo;
 
 pub use iced::button::{Class, State};
 
 pub type Button<'a, Message> = iced::Button<'a, Message>;
 
-impl<'a, Message> Widget<Message> for Button<'a, Message> {}
+impl<'a, Message> Widget<Message> for Button<'a, Message>
+where
+    Message: 'static + Copy,
+{
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        bus: &Bus<Message>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        let label = bumpalo::format!(in bump, "{}", self.label);
+
+        let mut node = button(bump).children(vec![text(label.into_bump_str())]);
+
+        if let Some(on_press) = self.on_press {
+            let event_bus = bus.clone();
+
+            node = node.on("click", move |root, vdom, _event| {
+                event_bus.publish(on_press, root);
+
+                vdom.schedule_render();
+            });
+        }
+
+        node.finish()
+    }
+}
 
 impl<'a, Message> From<Button<'a, Message>> for Element<'a, Message>
 where
-    Message: 'static,
+    Message: 'static + Copy,
 {
     fn from(button: Button<'a, Message>) -> Element<'a, Message> {
         Element::new(button)

web/src/widget/column.rs

@@ -1,4 +1,6 @@
-use crate::{Align, Element, Widget};
+use crate::{Align, Bus, Element, Widget};
+
+use dodrio::bumpalo;
 
 pub struct Column<'a, Message> {
     children: Vec<Element<'a, Message>>,
@@ -36,7 +38,23 @@ impl<'a, Message> Column<'a, Message> {
     }
 }
 
-impl<'a, Message> Widget<Message> for Column<'a, Message> {}
+impl<'a, Message> Widget<Message> for Column<'a, Message> {
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        publish: &Bus<Message>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        let children: Vec<_> = self
+            .children
+            .iter()
+            .map(|element| element.widget.node(bump, publish))
+            .collect();
+
+        div(bump).children(children).finish()
+    }
+}
 
 impl<'a, Message> From<Column<'a, Message>> for Element<'a, Message>
 where

web/src/widget/row.rs

@@ -1,4 +1,6 @@
-use crate::{Element, Widget};
+use crate::{Bus, Element, Widget};
+
+use dodrio::bumpalo;
 
 pub struct Row<'a, Message> {
     children: Vec<Element<'a, Message>>,
@@ -24,7 +26,23 @@ impl<'a, Message> Row<'a, Message> {
     }
 }
 
-impl<'a, Message> Widget<Message> for Row<'a, Message> {}
+impl<'a, Message> Widget<Message> for Row<'a, Message> {
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        publish: &Bus<Message>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        let children: Vec<_> = self
+            .children
+            .iter()
+            .map(|element| element.widget.node(bump, publish))
+            .collect();
+
+        div(bump).children(children).finish()
+    }
+}
 
 impl<'a, Message> From<Row<'a, Message>> for Element<'a, Message>
 where

web/src/widget/text.rs

@@ -1,10 +1,27 @@
-use crate::{Color, Element, Widget};
+use crate::{Bus, Color, Element, Widget};
+use dodrio::bumpalo;
 
 pub use iced::text::HorizontalAlignment;
 
 pub type Text = iced::Text<Color>;
 
-impl<'a, Message> Widget<Message> for Text {}
+impl<'a, Message> Widget<Message> for Text {
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        _publish: &Bus<Message>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        let content = bumpalo::format!(in bump, "{}", self.content);
+        let size = bumpalo::format!(in bump, "font-size: {}px", self.size.unwrap_or(20));
+
+        p(bump)
+            .attr("style", size.into_bump_str())
+            .children(vec![text(content.into_bump_str())])
+            .finish()
+    }
+}
 
 impl<'a, Message> From<Text> for Element<'a, Message> {
     fn from(text: Text) -> Element<'a, Message> {