sauron
0.40.0
Sauron est un cadre Web polyvalent et une bibliothèque pour la création d'applications Web côté client et / ou côté serveur en mettant l'accent sur l'ergonomie, la simplicité et l'élégance. Cela vous permet d'écrire le moins de code possible et de vous concentrer davantage sur la logique métier plutôt que sur les détails intérieurs du cadre.
Sauron est inspiré par Elm-Lang et suit l'architecture ELM.
Dans une application Sauron, il n'y a que le modèle, la vue et la mise à jour. Le modèle est votre état d'application. La vue décrit comment présenter le modèle à l'utilisateur. La fonction de mise à jour décrit comment mettre à jour le modèle, celle-ci utilise un message qui contient les données nécessaires pour mettre à jour le modèle.
Dans votre src/lib.rs
use sauron :: {
html :: text , html :: units :: px , jss , node , wasm_bindgen , Application , Cmd , Node , Program ,
} ;
enum Msg {
Increment ,
Decrement ,
Reset ,
}
struct App {
count : i32 ,
}
impl App {
fn new ( ) -> Self {
App { count : 0 }
}
}
impl Application for App {
type MSG = Msg ;
fn view ( & self ) -> Node < Msg > {
node ! {
<main>
<input type = "button"
value= "+"
on_click=|_| {
Msg :: Increment
}
/>
<button class= "count" on_click=|_| { Msg :: Reset } > { text ( self . count ) } </button>
<input type = "button"
value= "-"
on_click=|_| {
Msg :: Decrement
}
/>
</main>
}
}
fn update ( & mut self , msg : Msg ) -> Cmd < Msg > {
match msg {
Msg :: Increment => self . count += 1 ,
Msg :: Decrement => self . count -= 1 ,
Msg :: Reset => self . count = 0 ,
}
Cmd :: none ( )
}
fn stylesheet ( ) -> Vec < String > {
vec ! [ jss! {
"body" : {
font_family : "verdana, arial, monospace" ,
} ,
"main" : {
width : px ( 30 ) ,
height : px ( 100 ) ,
margin : "auto" ,
text_align : "center" ,
} ,
"input, .count" : {
font_size : px ( 40 ) ,
padding : px ( 30 ) ,
margin : px ( 30 ) ,
}
} ]
}
}
# [ wasm_bindgen ( start ) ]
pub fn start ( ) {
Program :: mount_to_body ( App :: new ( ) ) ;
} index.html
<!doctype html >
< html >
< head >
< meta content =" text/html;charset=utf-8 " http-equiv =" Content-Type " />
< title > Counter </ title >
< script type = module >
import init from './pkg/counter.js' ;
await init ( ) . catch ( console . error ) ;
</ script >
</ head >
< body >
</ body >
</ html > Dans Cargo.toml , spécifiez le type de caisse pour être cdylib
[ package ]
name = " counter "
version = " 0.1.0 "
edition = " 2021 "
[ lib ]
crate-type = [ " cdylib " ]
[ dependencies ]
sauron = " 0.61.0 " cargo install wasm-pack
cargo install basic-http-serverConstruire en utilisant
wasm-pack build --target web --releaseServir à l'aide
basic-http-server -a 0.0.0.0:4000Puis accédez à http: // localhost: 4000
Rendez-vous sur le getting-started.md pour le tutoriel complet.
Pour plus de détails sur les commandes pour construire et servir, consultez des exemples sur ce dépôt, chacun a des scripts sur la façon de les construire et de les exécuter.
Licence: MIT
