One crate to rule the DOM
One crate to mind it
One crate to bring JSON
And in the Rust code bind it
This code, no other, is made by code elves
Who'd pawn parent process to get it themselves
Ruler of net troll and mortal and hacker
This code is a lib crate for Patreon backers
If trashed or buggy it cannot be remade
If found send to Ivan, the bandwidth is prepaid
-- The Harvard Lampoon & po8
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.
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"]
Note: You need to use the nightly compiler with minimum version: rustc 1.37.0-nightly (17e62f77f 2019-07-01)
Build using
$> wasm-pack build --target no-modules
Look at the examples
and the build script for the details.
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.
cargo install wasm-pack
cargo install basic-http-server
Warning: I repeat, You need to use the latest nightly compiler in order for this to work.
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:
|