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

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<Msg> 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::mount_to_body(App::new());
}

index.html

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>Minimal sauron app</title>
  </head>
  <body>
    <script src='pkg/minimal.js'></script>
    <script type=module>
        window.wasm_bindgen('pkg/minimal_bg.wasm')
            .catch(console.error);
    </script>
  </body>
</html>

In Cargo.toml, specify the crate-type to be cdylib

[lib]
crate-type = ["cdylib"]

Build using

$> 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:

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:

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

Performance:

Sauron is one of the fastest.

Benchmark

Run the benchmark yourself:

Benchmark 1 Benchmark 2

Please support this project:

License: MIT

sauron 0.28.2