Sauron is a versatile web framework and library for building client-side and/or server-side web applications with strong focus on simplicity. It is suited for developing web application which uses progressive rendering.
In your src/lib.rs
use sauron::prelude::*;
#[derive(Debug)]
enum Msg {
Click,
}
struct App {
click_count: u32,
}
impl App {
pub fn new() -> Self {
App { click_count: 0 }
}
}
impl Application<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={|_| {
log::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> {
log::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>Counter</title>
<style type="text/css">
body { font-family: verdana, arial, monospace; }
main {
width:30px;
height: 100px;
margin:auto;
text-align: center;
}
input, .count{
font-size: 40px;
padding: 30px;
}
</style>
<script type=module>
import init from './pkg/counter.js';
await init().catch(console.error);
</script>
</head>
<body>
</body>
</html>In Cargo.toml, specify the crate-type to be cdylib
[package]
name = "counter"
version = "0.1.0"
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
sauron = "0.49"cargo install wasm-pack
cargo install basic-http-serverBuild using
wasm-pack build --target web --releaseServe using
basic-http-server -a 0.0.0.0:4000
Then navigate to http://localhost:4000
Head over to the getting-started.md for the full tutorial.
For more details on the commands to build and serve, look on examples on this repo, each has scripts on how to build and run them.
- todomvc The todomvc example
- data-viewer - A resizable spreadsheet CSV data viewer
- svg-clock - A clock drawn using SVG and window tick event.
- ultron code-editor - A web-base text-editor with syntax highlighting
- hackernews-sauron - A hackernews clone showcasing the feature of sauron to write web applications that can work with or without javascript.
License: MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent