[−][src]Crate sauron

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 log::trace;
use sauron::html::attributes::attr;
use sauron::html::text;
use sauron::prelude::*;
use sauron::{Cmd, Component, Node, Program};

#[derive(Debug)]
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> {
        node! {
            <main>
                <h1>"Minimal example"</h1>
                <div class="some-class" id="some-id" {attr("data-id", 1)}>
                    <input class="client"
                            type_="button"
                            value="Click me!"
                            key=1
                            on_click={|_| {
                                trace!("Button is clicked");
                                Msg::Click
                            }}
                    />
                    <div>{text(format!("Clicked: {}", self.click_count))}</div>
                    <input type_="text" value={self.click_count}/>
                </div>
            </main>
        }
    }

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

#[wasm_bindgen(start)]
pub fn main() {
    console_log::init_with_level(log::Level::Trace).unwrap();
    console_error_panic_hook::set_once();
    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 type=module>
        import init from './pkg/minimal.js';
        init().catch(console.error);
    </script>
  </body>
</html>

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


[package]
name = "minimal"
version = "0.1.0"
edition = "2018"

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


[dependencies]
sauron = "0.30"
console_error_panic_hook = { version = "0.1"}
log = "0.4"
console_log = {version ="0.2", features = ["color"]}

Build using

$> wasm-pack build --target web --release

Look at the examples and the build script for the details.

Demo examples

todomvc
futuristic-ui - A demo of futuristic-ui showcasing animation, transition and timed Component update.
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.

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:

Re-exports

pub use sauron_core::web_sys;

pub use sauron_core::wasm_bindgen;

Modules

apply_patches	provides functionalities related to patching the DOM in the browser.
cmd	provides functionalities for commands to be executed by the system, such as when the application starts or after the application updates.
dom	This module provides functionalities for manipulating the actual Document Object Model in the browser
events	https://developer.mozilla.org/en-US/docs/Web/Events
html	Provides functions and macros to build html elements
jss	json css
prelude	reexport prelude from sauron core

Macros

jss	jss macro
node	Quasi-quoting macro for building sauron Nodes.

Structs

AnimationEvent	The `AnimationEvent` class.
Browser	provides an interface for doing url request, such as fetch resize events, keyboard event, timeout event
CreatedNode	A node along with all of the closures that were created for that node's events and all of it's child node's events.
DomUpdater	Used for keeping a real DOM node up to date based on the current Node and a new incoming Node that represents our latest DOM state.
HashChangeEvent	The `HashChangeEvent` class.
Http	Provides functions for doing http network request
InputEvent	a custom InputEvent to contain the input string value
KeyboardEvent	The `KeyboardEvent` class.
MouseEvent	The `MouseEvent` class.
Program	Holds the user App and the dom updater This is passed into the event listener and the dispatch program will be called after the event is triggered.
TransitionEvent	The `TransitionEvent` class.
Window	Provides access to the Browser window

Constants

HTML_EVENTS

html events

Traits

Component	The app should implement this trait for it to be handled by the Program
Dispatch	This trait is used in the DomUpdater to call the dispatch method when an event occured
Render	render node, elements to a writable buffer

Functions

body	provides access to the document body
diff	This is a sauron html specific functionality diff 2 nodes with attribute using `&'static str` instead of generic ATT
document	provides access to the document element
history	utility function which returns the history api of the browser
now	return the instantaneous time
on	an event builder
on_animationend	attach an on_animationend event to the html element
on_auxclick	attach an on_auxclick event to the html element
on_blur	attach an on_blur event to the html element
on_broadcast	attach an on_broadcast event to the html element
on_change	attach an on_change event to the html element
on_click	on click event
on_contextmenu	attach an on_contextmenu event to the html element
on_dblclick	attach an on_dblclick event to the html element
on_doubleclick	attach an on_doubleclick event to the html element
on_focus	attach an on_focus event to the html element
on_hashchange	attach an on_hashchange event to the html element
on_input	attach an on_input event to the html element
on_keydown	attach an on_keydown event to the html element
on_keypress	attach an on_keypress event to the html element
on_keyup	attach an on_keyup event to the html element
on_mousedown	attach an on_mousedown event to the html element
on_mouseenter	attach an on_mouseenter event to the html element
on_mouseleave	attach an on_mouseleave event to the html element
on_mousemove	attach an on_mousemove event to the html element
on_mouseout	attach an on_mouseout event to the html element
on_mouseover	attach an on_mouseover event to the html element
on_mouseup	attach an on_mouseup event to the html element
on_pointerlockchange	attach an on_pointerlockchange event to the html element
on_pointerlockerror	attach an on_pointerlockerror event to the html element
on_readystatechange	attach an on_readystatechange event to the html element
on_reset	attach an on_reset event to the html element
on_scroll	attach callback to the scroll event
on_select	attach an on_select event to the html element
on_submit	attach an on_submit event to the html element
on_transitionend	attach an on_transitionend event to the html element
on_wheel	attach an on_wheel event to the html element
performance	provides access to the window Performance api
request_animation_frame	utility function which executes the agument closure in a request animation frame
window	utility function which returns the Window element

Type Definitions

Attribute	Attribute type used in sauron where the type of the Attribute name is &'static str
Callback	Callback where Event type is supplied
Cmd	alias Cmd to use Program as the APP
Element	Element type with tag and attribute name type set to &'static str
Node	A simplified version of saurdon_vdom node, where we supplied the type for the tag which is a &'static str. The missing type is now only MSG which will be supplied by the users App code.
Patch	Patch as result of diffing the current_vdom and the new vdom. The tag and attribute name types is set to &'static str