[−][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 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

pub use render::Render;

pub use mt_dom;

Modules

dom	This module provides functionalities for manipulating the actual Document Object Model in the browser
html	Provides functions and macros to build html elements
prelude	Prelude simplifies the imports from sauron This imports the necessary functions to build a basic sauron app.
render	This contains a trait to be able to render virtual dom into a writable buffer
svg	Provides functions and macros to build svg elements

Macros

a	TODO:
abbr	TODO:
address	TODO:
animate	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
animateMotion	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
animateTransform	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
area	TODO:
article	TODO:
aside	TODO:
audio	TODO:
b	TODO:
base	TODO:
bdi	TODO:
bdo	TODO:
blockquote	TODO:
body	TODO:
br	TODO:
button	TODO:
canvas	TODO:
caption	TODO:
circle	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
cite	TODO:
clipPath	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
code	TODO:
col	TODO:
colgroup	TODO:
data	TODO:
datalist	TODO:
dd	TODO:
declare_attributes	declare a function with the name corresponds to attribute name for easy usage in html elements Example:
defs	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
del	TODO:
desc	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
details	TODO:
dfn	TODO:
dialog	TODO:
discard	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
div	TODO:
dl	TODO:
dt	TODO:
ellipse	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
em	TODO:
embed	TODO:
feBlend	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feColorMatrix	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feComponentTransfer	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feComposite	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feConvolveMatrix	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feDiffuseLighting	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feDisplacementMap	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feDistantLight	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feDropShadow	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feFlood	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feFuncA	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feFuncB	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feFuncG	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feFuncR	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feGaussianBlur	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feImage	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feMerge	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feMergeNode	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feMorphology	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feOffset	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
fePointLight	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feSpecularLighting	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feSpotLight	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feTile	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
feTurbulence	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
fieldset	TODO:
figcaption	TODO:
figure	TODO:
filter	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
footer	TODO:
foreignObject	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
form	TODO:
g	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
h1	TODO:
h2	TODO:
h3	TODO:
h4	TODO:
h5	TODO:
h6	TODO:
hatch	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
hatchpath	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
head	TODO:
header	TODO:
hgroup	TODO:
hr	TODO:
html	TODO:
i	TODO:
iframe	TODO:
image	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
img	TODO:
input	TODO:
ins	TODO:
kbd	TODO:
label	TODO:
legend	TODO:
li	TODO:
linearGradient	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
link	TODO:
main	TODO:
map	TODO:
mark	TODO:
marker	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
mask	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
menu	TODO:
menuitem	TODO:
mesh	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
meshgradient	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
meshpatch	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
meshrow	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
meta	TODO:
metadata	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
meter	TODO:
mpath	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
nav	TODO:
noscript	TODO:
object	TODO:
ol	TODO:
optgroup	TODO:
option	TODO:
output	TODO:
p	TODO:
param	TODO:
path	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
pattern	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
picture	TODO:
polygon	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
polyline	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
pre	TODO:
progress	TODO:
q	TODO:
radialGradient	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
rb	TODO:
rect	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
rp	TODO:
rt	TODO:
rtc	TODO:
ruby	TODO:
s	TODO:
samp	TODO:
script	TODO:
section	TODO:
select	TODO:
set	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
slot	TODO:
small	TODO:
solidcolor	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
source	TODO:
span	TODO:
stop	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
strong	TODO:
style	a utility function for convenient styling of elements
sub	TODO:
summary	TODO:
sup	TODO:
svg	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
switch	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
symbol	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
table	TODO:
tbody	TODO:
td	TODO:
template	TODO:
text	creates a text node Example
textPath	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
textarea	TODO:
tfoot	TODO:
th	TODO:
thead	TODO:
time	TODO:
title	TODO:
tr	TODO:
track	TODO:
tspan	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
u	TODO:
ul	TODO:
unknown	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
var	TODO:
video	TODO:
view	name is the supplied ident in `declare_tags_macro` This creates an alternative macro call to the tag function This has a more cleaner syntax since it removes the need for using vec![] for both the attributes and the children
wbr	TODO:

Functions

diff	This is a sauron html specific functionality diff 2 nodes with attribute using `&'static str` instead of generic ATT

Type Definitions

Attribute	Attribute type used in sauron where the type of the Attribute name is &'static str
AttributeKey	attribute keys
Callback	Callback where Event type is supplied
Element	Element type with tag and attribute name type set to &'static str
Event	Map the Event to DomEvent, which are browser events
Namespace	namespace type in node, which could be change to an enum
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
Tag	tags are using static str for now, can also be enum tags

[−][src]Crate sauron

Example

Demo examples

Converting HTML into Sauron's syntax

Prerequisite:

Performance:

Run the benchmark yourself:

Please support this project:

Re-exports

Modules

Macros

Functions

Type Definitions