#wasm #html #dom #web

macro hirola-macros

Hirola is an un-opinionated web framework that is focused on simplicity and predictability

9 releases

0.2.0 Oct 1, 2022
0.2.0-beta.1 Sep 20, 2022
0.2.0-alpha.1 Aug 22, 2022
0.1.7 Aug 16, 2022
0.1.1 Dec 30, 2020

#1270 in Procedural macros

Download history 6/week @ 2022-11-28 13/week @ 2022-12-05 16/week @ 2022-12-12 21/week @ 2022-12-19 10/week @ 2022-12-26 5/week @ 2023-01-02 12/week @ 2023-01-09 113/week @ 2023-01-16 40/week @ 2023-01-23 28/week @ 2023-01-30 15/week @ 2023-02-06 35/week @ 2023-02-13 37/week @ 2023-02-20 3/week @ 2023-02-27 8/week @ 2023-03-06 7/week @ 2023-03-13

61 downloads per month
Used in 3 crates (2 directly)

MIT/Apache

19KB
343 lines

Hirola

Latest Version Browser Tests Unit Tests MIT licensed

Hirola is an un-opinionated webf ramework that is focused on simplicity and predictability.

Goals

  1. Keep it simple. A simple and declarative way to build web UIs in rust with a small learning curve.
  2. Make it easy to read, extend and share code. Mixins and components are kept simple and macro-free.
  3. No context, you can choose passing props down, and/or use the global-state.
  4. Familiality. Uses rsx which is very similar to jsx.

Example

We are going to create a simple counter program.

cargo new counter

With a new project, we need to create an index file which is the entry point and required by trunk

cd counter

Create an index.html in the root of counter. Add the contents below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hirola Counter</title>
    <body></body>
  </head>
</html>

Lets add some code to src/main.rs

use hirola::prelude::*;

fn counter(app: &HirolaApp) -> Dom {
    let count = Signal::new(0);
    let increment = count.mut_callback(|c, _| c + 1)
    html! {
        <div>
            <button on:click=increment>"Increment"</button>
            <span>{count.get()}</span>
        </div>
    }
}
fn main() {
    let window = web_sys::window().unwrap();
    let document = window.document().unwrap();
    let body = document.body().unwrap();

    let app = HirolaApp::new();
    app.mount(&body, counter);
}

Now lets run our project

trunk serve

You should be able to get counter running: Live Example

Ecosystem

Check out Hirola Docs written with Hirola itself!

Here are some extensions for hirola:

  1. Form
  2. Router
  3. State

Milestones

Status Goal Labels
Write code that is declarative and easy to follow ready
Allow extensibility via mixins ready
🚀 Standardize Components ready
🚀 SSR ready
🚀 Hydration todo
🚀 Serverside integrations todo

Inspiration

  • Sycamore
  • Alpine.js
  • React.js
  • Yew

Demo examples

This API will certainly change.

Go to examples and use trunk

$  trunk serve

Prerequisite:

You need need to have rust, cargo and trunk installed.

License: MIT

Dependencies

~0.8–1.2MB
~28K SLoC