Crate savory

Savory is library for building user interface.

· · · ·

Core Concept

There are two main types in Savory, Views and Elements. View types produce static HTML nodes, while Element types produce dynamic HTML nodes, as simple as that.

View types

View types implements View trait, this trait have one method that generate the resulted HTML nodes, here is simple example:

struct HomePage;

impl<Msg> View<Node<Msg>> for HomePage {
    fn view(&self) -> Node<Msg> {
        html::div().push("Home page")
    }
}

Element types

Element types implements Element trait, most of the time elements have logic inside them, they commonly carry their state inside them, and since Savory follow Elm style we need message type and lastly we need config type that is used to config the element on it’s initialization, here is simple example:

// Element module
struct Counter(u32);

enum Msg {
    Increase,
    Decrease,
}

impl Element for Counter {
    type Config = u32;
    type Message = Msg;

    fn init(config: u32, _orders: &mut impl Orders<Msg>) -> Self {
        Counter(config)
    }

    fn update(&mut self, msg: Self::Message, _orders: &mut impl Orders<Self::Message>) {
        match msg {
            Msg::Increase => self.0 += 1,
            Msg::Decrease => self.0 -= 1,
        }
    }
}

impl View<Node<Msg>> for Counter {
    fn view(&self) -> Node<Msg> {
        html::div()
        .push(
            html::button()
                .push("+")
                .on_click(|_| Msg::Increase)
        )
        .push(
            html::button()
                .push("-")
                .on_click(|_| Msg::Decrease)
        )
        .push(html::h1().push(self.0.to_string()))
    }
}

This example shows how to wirte counter element, so you can write your own elements.

Ecosystem

• savory (this crate) - Core library for building user interface
• savory-router - Savory Router used to generate router for your app
• savory-style - Typed CSS style for Savory
• savory-elements - Collection of UI elements based on Savory
• savory-elements-derive - Crate that provide Element derive

Re-exports

pub extern crate seed;

pub use web_sys;

Modules

element	Traits used to handle model messages and update element state accordingly.
events	Traits and implementation that makes working Node events API declarative and convenient.
html	Functions used to create HTML nodes
node	Traits and implementation that makes working with Node API declarative and convenient.
orders	Traits extensions that makes working with Orders API more convenient.
prelude
traits	Helper traits commonly used to make API consistent and convenient.
view	Traits used to build views.