A modular toolkit for building isomorphic web apps with Rust + WebAssembly
View the isomorphic web app example live with a query string! 😉
An isomorphic web application allows the same application code (in our case Rust code) to be run on both the server-side and the client-side (usually a web browser).
In a browser our application renders to an HtmlElement, and on the server our application renders to a String.
For an example of an isomorphic web app in Rust check out the isomorphic example or view the isomorphic web app example live.
For more on the html! macro see html macro
#![feature(proc_macro_hygiene)]
use virtual_dom_rs::prelude::*;
use css_rs_macro::css;
static SOME_COMPONENT_CSS: &'static str = css! {"
:host {
font-size: 30px;
font-weight: bold;
}
:host > span {
color: blue;
}
"};
fn main () {
let count = Rc::new(Cell::new(0));
let count_clone = Rc::clone(count);
let html = html! {
<div id="hello-world" class=SOME_COMPONENT_CSS>
<span>Hey there!</span>
<button
onclick=|_event: web_sys::MouseEvent| { count_clone.set(count_clone.get() + 1); },
// CSS in Rust isn't required. You can use regular old
/* classes just fine! */
class="btn-bs4 btn-bs4-success"
>
Click Me!
</button>
</div>
};
// Used for server side rendering
println!("{}", html.to_string());
// Check out the DomUpdater for client side rendering
}Please open issues / PRs explaining your intended use case and let's see if we should or shouldn't make percy support it!
Also feel free to open issues and PRs with any questions / thoughts that you have!
To run all of the unit, integration and browser tests, grab the dependencies then :
./test.sh-
virtual-dom - a JavaScript virtual-dom implementation that I took inspiration from.
-
How to write your own Virtual DOM - helped me better understand how a virtual-dom works.
-
Sheetify inspired the css! macro
MIT