[−][src]Crate 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.32"
console_error_panic_hook = "0.1"
log = "0.4"
console_log = "0.2"
Build using
$> wasm-pack build --target web --release
Look at the examples and the build script for the details.
Demo examples
- todomvc The todomvc example
- 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
- code-editor - A WIP web-base code-editor
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.
Run the benchmark yourself:
Please support this project:
Re-exports
pub use sauron_core::web_sys; |
pub use sauron_core::wasm_bindgen; |
pub use sauron_core::js_sys; |
pub use sauron_core::mt_dom; |
pub use sauron_core::serde_json; |
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 |
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 |
Http | Provides functions for doing http network request |
InputEvent | a custom InputEvent to contain the input string value |
KeyboardEvent | The |
MouseEvent | The |
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. |
Text | Text node |
TransitionEvent | The |
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 |
document | provides access to the document element |
execute_in_request_animation_frame | request animation frame and execute function |
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_enter | custom on_enter event, which is triggered from key_press when the Enter key is pressed |
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 |