sauron
0.40.0
Sauron ist ein vielseitiges Web-Framework und eine Bibliothek zum Erstellen von Webanwendungen für clientseitige und/oder serverseitige Webanwendungen mit starkem Fokus auf Ergonomie, Einfachheit und Eleganz. Auf diese Weise können Sie die geringste Menge an so möglicher Code schreiben und sich mehr auf die Geschäftslogik als auf die inneren Details des Frameworks konzentrieren.
Sauron ist von Elm-Lang inspiriert und folgt der ELM-Architektur.
In einer Sauron -Anwendung gibt es nur das Modell, die Ansicht und das Update. Das Modell ist Ihr Anwendungszustand. Die Ansicht beschreibt, wie das Modell dem Benutzer präsentiert wird. In der Aktualisierungsfunktion wird beschrieben, wie das Modell aktualisiert wird. Dadurch wird eine Nachricht verwendet, die die Daten enthält, die für die Aktualisierung des Modells benötigt werden.
In Ihrem 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 > In Cargo.toml geben Sie den Kisten-Typ an, um cdylib zu sein
[ 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-serverBauen mit
wasm-pack build --target web --releaseBenutze dienen
basic-http-server -a 0.0.0.0:4000Navigieren Sie dann zu http: // localhost: 4000
Gehen Sie zum vollständigen Tutorial zum getting-started.md .
Weitere Informationen zu den Befehlen zum Erstellen und Servieren finden Sie in Beispielen auf diesem Repo. Jeder verfügt über Skripte zum Erstellen und Ausführen.
Lizenz: MIT
