Crate valerie

Source
Expand description

Rust front-end framework for building web apps.

Valerie is still in a very early phase. A lot of features are not available at the moment. A lot of work is left and you are welcome to try it out.

  • No Virtual DOM.
  • UI can be made in a simple manner, by following an MVVM architecture rather an MVC architecture.
  • Use state variables to update the UI where required.
  • Written without any unsafe code.
  • nightly Rust required.

§Architecture

  • Every UI element has to implement the Component trait.
  • A page is a function which returns a Node.
  • Two type of State variables
  • StateAtomic for types implementing Copy.
  • StateMutex for types implementing Clone.

§Setting up

  • Run cargo new --lib some_name
  • Add valerie to the dependencies
  • Create a static directory and create an index.html inside it
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <script type="module">
            import init from "./wasm.js"
            init()
        </script>
    </head>
    <body></body>
</html>
  • Also in the Cargo.toml enable lto.
[profile.release]
lto = true
opt-level = 3
  • Compile it using wasm-pack by running wasm-pack build --target web --out-name wasm --out-dir ./static
  • Use some server, like miniserve, to host the ./static folder and try it out.

Take a look at wasm-pack docs for more options.

§Examples

§Hello world

use valerie::prelude::components::*;
use valerie::prelude::*;

fn ui() -> Node {
    h1!("Hello World").into()
}

#[valerie(start)]
pub fn run() {
    App::render_single(ui());
}

§Add and Subtract one using a Button

use valerie::prelude::components::*;
use valerie::prelude::*;

fn ui() -> Node {
    let value = StateAtomic::new(0isize);

    div!(
        h1!("Value ", value.clone()),
        button!("Add 1")
            .on_event("click", value.clone(), move |x, _| {
                *x += 1;
            }),
        button!("Subtract 1")
            .on_event("click", value.clone(), move |x, _| {
                *x -= 1;
            })
    )
    .into()
}

#[valerie(start)]
pub fn run() {
    App::render_single(ui());
}

§Time Counter

use valerie::prelude::components::*;
use valerie::prelude::*;
use wasm_timer::Delay;

fn ui() -> Node {
    let timer = StateAtomic::new(0);

    execute(time(1, timer.clone()));

    p!("Seconds passed: ", timer).into()
}

async fn time(n: u64, mut timer: StateAtomic<usize>) {
    while Delay::new(core::time::Duration::from_secs(n))
        .await
        .is_ok() {
        timer += 1;
    }
}

#[valerie(start)]
pub fn run() {
    App::render_single(ui());
}

§Features

  • debug For debugging purposes. Use this feature if your code is crashing during runtime and you want a stack trace.

Modules§

html
Contains the HTML Tags
prelude
The prelude module
state
Contains the structs for defining States

Macros§

br
br element
button
button element
div
div element
h1
h1 element
h2
h2 element
h3
h3 element
h4
h4 element
h5
h5 element
h6
h6 element
img
img element
input
input element
li
li element
ol
ol element
p
p element
span
span element
ul
ul element

Structs§

App
The App struct for creating an App
Channel
A wrapper around Arc<String>
Node
A wrapper for web_sys::Node
Tag
An HTML Tag

Traits§

Component
Component trait
Value
Value trait