An experimental functional web UI framework that uses the Rust type system for hooks and more.
Other Functional UI Frameworks:
-
Require the developer to follow the Rule of Hooks or something similar.
-
Dynamically identify components/hooks and maintain their states by counting the order in which they are called.
-
Dynamic design:
- Components are dynamically created and mounted as their parents render.
- Components may be mounted or unmounted depending on state.
Consecuit:
-
Automatically enforce the Rule of Hooks using the Rust type system.
-
Statically know every component that will be created and every hook call that will happen.
-
Static-first design:
- Components are statically mounted at the start of the app and remain mounted forever by default.
- Mounting/unmounting based on state are considered special cases available through explicitly using
opt_comp,vec_comps, etc.
Take a look at our TodoMVC (and see its source code).
Or if you want something simpler, here is the code for a counter.
use consecuit::prelude::*;
use consecuit_html::prelude::*;
use wasm_bindgen::prelude::*;
#[wasm_bindgen(start)]
pub fn run() -> Result<(), JsValue> {
consecuit::mount::mount_app(counter);
Ok(())
}
fn counter(cc: ComponentBuilder, _: ()) -> impl ComponentReturn {
let (cc, (count, setter)) = cc.hook(use_state, 0);
let setter1 = setter.clone();
let decrement = Callback::new(move |_ev| {
setter1.update_with(|v| v - 1);
});
let increment = Callback::new(move |_ev| {
setter.update_with(|v| v + 1);
});
cc_tree!(
<button {html_props().onclick(decrement)}>"-"</button>
{count.to_string()}
<button {html_props().onclick(increment)}>"+"</button>
)
}There are more counter examples here
(with live demo here),
including one without macro and one with logic extracted into a use_counter function.
Follow our simple guide below:
Click to expand guide
Note: This guide is for you to get started as quickly as possible. The WASM setup part of the guide is very basic. You should read the rustwasm book later on.
-
Initialize a new lib crate.
cargo new --lib YOUR_CRATE_NAME_HERE cd YOUR_CRATE_NAME_HERE -
Add this to your
Cargo.toml:[lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2.74" consecuit = "0.2.0" consecuit_html = "0.2.0" -
Create an
index.htmlin the root of your project with this content.<html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> </head> <body> <script type="module"> import init from './pkg/YOUR_CRATE_NAME_HERE.js'; init(); </script> </body> </html>
(replace
YOUR_CRATE_NAME_HEREwith the name of your crate.) -
Install
wasm-pack:cargo install wasm-pack
-
Write your code.
You can copy-paste the counters example above.
Also take a look at the examples directory and the docs.
-
Build it!
wasm-pack build --dev --target web
-
Serve it!
# Install a simple web server. cargo install microserver # And run it! microserver
Final code is in examples/minimal_counter.
The docs have more info on creating components and hooks.
This library is still in an early stage. A lot of features are missing. (For example, inline styling is not available right now; you need to use class names and write CSS.)
Contributions are welcomed!
This crate uses unsafe.
All publicly exposed functions are safe.