#html #dom #web

sauron

An html library for building client side webapps

35 releases (18 breaking)

0.29.0 Jul 28, 2020
0.27.1 Jul 18, 2020
0.22.2 Mar 5, 2020
0.20.3 Dec 13, 2019
0.10.0 Jul 25, 2019

#7 in Template engine

Download history 71/week @ 2020-04-20 24/week @ 2020-04-27 24/week @ 2020-05-04 89/week @ 2020-05-11 38/week @ 2020-05-18 47/week @ 2020-05-25 194/week @ 2020-06-01 41/week @ 2020-06-08 132/week @ 2020-06-15 115/week @ 2020-06-22 817/week @ 2020-06-29 473/week @ 2020-07-06 239/week @ 2020-07-13 166/week @ 2020-07-20 323/week @ 2020-07-27 163/week @ 2020-08-03

826 downloads per month
Used in 6 crates (5 directly)

MIT license

265KB
4.5K SLoC

Maintenance

sauron

Latest Version Build Status MIT licensed

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

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 Benchmark

Run the benchmark yourself:

Benchmark 1 Benchmark 2

Please support this project:

Become a patron

License: MIT

Dependencies

~0.5–2.6MB
~53K SLoC