Leptodon 1.0.0 a fost lansat! | R-bloggeri

Leptodon este o bibliotecă de componente bazată pe Leptos, scrisă în Rust. Leptos folosește un sistem de grafic reactiv pentru a face actualizări DOM țintite. Acest lucru face ca Leptos să fie potrivit pentru aplicații extrem de interactive, fără a provoca încetiniri inutile în browser. Combinând graficul reactiv cu un limbaj puternic tipizat, cum ar fi Rust, înseamnă că ar trebui să putem construi componente robuste și eficiente pentru aplicațiile de știință a datelor.

Proiectul nostru poartă numele Leptodon cayanensis (zmeul cu cap gri). Frumosul Leptodon cayanensis este o mascotă grozavă, deoarece ne străduim să facem un set de instrumente UI la fel de frumos. Desigur, Leptodonul a fost ales față de alte păsări, deoarece sună foarte asemănător cu „Leptos” (care este greacă pentru lumină/subțire).

Leptos vă permite să scrieți HTML aproape nativ în interiorul Rust folosind puterea macrocomenzilor procedurale. Acest amestec Rust-HTML se numește RSX și acest mix poate fi interpolat cu cod Rust real (la fel ca JSX) pentru a crea componente interactive. Un exemplu clasic este prezentat mai jos pentru a crea un buton albastru „+1” care crește un contor:

// Rust code
let count = RwSignal::new(0);
view! {
// RSX

{move ||
format!("Button was pressed {} times!", count.get())
}


1

}

Proprietățile precum aspectul sunt verificate de tipul de către compilatorul Rust, ceea ce înseamnă că este imposibilă trecerea unei opțiuni inexistente.

Styling cu Tailwind

Am ales să avem Tailwind v3 ca cadru CSS implicit pentru componentele de stil. Tailwind mapează proprietățile CSS cu numele claselor (de ex padding-right: 1px la pr-px). Acest sistem ne permite să stilăm aproape totul direct în componentă pe elementul HTML exact, fără a avea foarte mare style=... blocuri. Acest lucru menține componentele coezive, cu mai puține interferențe între ele. Pentru a menține acest lucru eficient, Tailwind generează un fișier CSS care conține doar clasele utilizate în codul sursă. Acest lucru este problematic pentru proiectul nostru, deoarece construim o ladă din care, implicit, Tailwind nu poate vedea codul sursă. Pentru a rezolva acest lucru, ne expunem codul sursă printr-o funcție generată în timpul construirii. Proiectele care depind de Leptodon sunt de așteptat să plaseze codul sursă Leptodon într-un fișier scanat de Tailwind, acest lucru este realizat pentru dvs. de șablonul nostru de pornire!

Pentru a ajuta dezvoltatorii să folosească componentele noastre, am adăugat demo-uri de componente cu codul sursă mai jos pe site-ul nostru. Vedeți demonstrația insignei Leptodon pentru un exemplu! Pentru a menține blocurile de cod sursă ale exemplelor demonstrative în sincronizare cu componentele demonstrate, am folosit macrocomenzile procedurale Rust. Noastre #(generate_codeblock) macro atunci când este aplicată pe o componentă demo, creează o a doua componentă care conține un bloc de cod al codului sursă al funcției adnotate! Acest lucru garantează pagina noastră demo și codul sursă al componentei rămâne sincronizat. În cele din urmă, avem un tabel cu parametrii fiecărei componente demonstrate în partea de jos a paginilor. Acestea sunt, de asemenea, generate, dar prin intermediul #(generate_docs) macro pe componentele Leptodon. Această generare de cod ne permite să menținem mai eficient site-ul demo, deoarece modificările documentației sunt reflectate imediat. Puteți vedea relația dintre cod și ieșire mai jos.

#(generate_codeblock(LinkExample)) // Generates the box containing the demo + source code.
#(component)
pub fn LinkDemo() -> impl IntoView {
view! {
"Explore more about OA on the "
OA website
}
}
#(component)
pub fn LinkDemoPage() -> impl IntoView {
view! {