[][src]Crate 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 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

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 Benchmark

Run the benchmark yourself:

Benchmark 1 Benchmark 2

Please support this project:

Become a patron

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

svg

Provides functions and macros to build svg elements

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