lit-html-rs

A Rust library for using the HTML template library lit-html created by the Google Polymer project.

this library is still in very early stages

[dependencies]
lit-html = "0"

Basics

lit-html works by creating templates that efficiently render to the DOM. When you are building a TemplateData object your data is being moved from WebAssembly into an object in JavaScript that can be used by the lit-html template.

You can put the following data on TemplateData:

• strings
• numbers
• booleans
• callbacks functions

use js::*;
use lit_html::*;

#[no_mangle]
pub fn main() {
    let data = TemplateData::new();
    data.set("name", "Ferris");
    render(html!(r#"<h1>Hello ${_.name}</h1>"#, &data), DOM_BODY);
}

See it working here.

Counter

You can build up complex UI by creating Templates that contain other data bound templates. lit-html efficiently manipulates the DOM when data changes.

use js::*;
use lit_html::*;

static mut COUNT: u32 = 0;

fn counter() -> Template {
    let data = TemplateData::new();
    data.set("count", unsafe { COUNT });
    data.set("increment", || {
        unsafe { COUNT += 1 };
        rerender();
    });
    html!(
        r#"The current count is ${_.count} <button @click="${_.increment}">+</button>"#,
        data
    )
}

fn app() -> Template {
    let data = TemplateData::new();
    data.set("content", counter());
    html!(
        r#"<div>This is a counter in Rust!</div><div>${_.content}</div>"#,
        data
    )
}

fn rerender() {
    render(&app(), DOM_BODY);
}

#[no_mangle]
pub fn main() {
    rerender();
}

See it working here.