sauron
0.40.0
Sauron es un marco web y una biblioteca versátil para construir aplicaciones web del lado del cliente y/o del lado del servidor con un fuerte enfoque en la ergonomía, la simplicidad y la elegancia. Esto le permite escribir una menor cantidad de código posible y centrarse más en la lógica comercial que en los detalles internos del marco.
Sauron está inspirado en Elm-Lang y está siguiendo la arquitectura ELM.
En una aplicación Sauron, solo existe el modelo, vista y actualización. El modelo es su estado de aplicación. La vista describe cómo presentar el modelo al usuario. La función de actualización describe cómo actualizar el modelo, esto usa un mensaje que contiene los datos necesarios para actualizar el modelo.
En tu 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 > En Cargo.toml , especifique que el tipo de caja sea 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-serverConstruir usando
wasm-pack build --target web --releaseServir usando
basic-http-server -a 0.0.0.0:4000Luego navegue a http: // localhost: 4000
Dirígete a The getting-started.md para el tutorial completo.
Para obtener más detalles sobre los comandos para construir y servir, busque ejemplos sobre este repositorio, cada uno tiene scripts sobre cómo construirlos y ejecutarlos.
Licencia: MIT
