sauron

Sauron is an HTML web framework for building web-apps with the goal of closely adhering to The Elm Architecture, a paragon of elegant design.

Sauron follow Elm's simplistic design of writing view code.

Example

```rust use sauron::prelude::; use wasm_bindgen::prelude::; use log::*;

[derive(Debug, PartialEq, Clone)]

pub enum Msg { Click, }

pub struct App { click_count: u32, }

impl App { pub fn new() -> Self { App { click_count: 0 } } }

impl Component for App {

fn view(&self) -> Node<Msg> {
    div!(
        [class("some-class"), id("some-id"), attr("data-id", 1)],
        [
            input!(
                [
                    class("client"),
                    type_("button"),
                    value("Click me!"),
                    on_click(|_| {
                        trace!("Button is clicked");
                        Msg::Click
                    }),
                ],
                [],
            ),
            text!("Clicked: {}", self.click_count),
        ],
    )
}

fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
    trace!("App is updating from msg: {:?}", msg);
    match msg {
        Msg::Click => {
            self.click_count += 1;
            Cmd::none()
        }
    }
}

}

[wasm_bindgen(start)]

pub fn main() { Program::mounttobody(App::new()); } index.html html In Cargo.toml, specify the crate-type to be `cdylib` toml [lib] crate-type = ["cdylib"] ```

Build using sh $> wasm-pack build --target no-modules Look at the examples and the build script for the details.

Demo examples

• todomvc
• data-viewer - A resizable spreadsheet CSV data viewer
• svg_clock - A clock drawn using SVG and window tick event.
• svg_graph - A simple graph using SVG
• tinki wiki - My personal wiki, powering my github pages

Converting HTML into Sauron's syntax

html2sauron - A tool to easily convert html into sauron node tree for your views.

Note: When writing the view in sauron, just keep in mind that the function name is the element tag you are creating and there is 2 arguments for it. The first argument is an array of the attributes of the element and the second argument is an array of the children of the element.

Example: rust div!([id("container"),class("hero")], [text("Content goes here")]) div macro call is the element tag. The 1st argument in the call is an array of attributes for the div element expressed in a function call id and class which are valid attributes for a div. The 2nd argument in the call is an array of the children elements, and you can nest as many as you like.

Prerequisite:

sh cargo install wasm-pack cargo install basic-http-server

Performance:

Sauron is one of the fastest.

Run the benchmark yourself:

Benchmark 1 Benchmark 2

Please support this project:

License: MIT