kagura 0.6.0

Frontend frame-work for wasm on Rust.
Documentation

logo

Kagura

Frontend frame-work for wasm on Rust.

Tutorial

In English

tutorial

In Japanese

[Kagura] Kagura + Rust でWebページを作成

Hello World

extern crate kagura;
extern crate wasm_bindgen;

use kagura::prelude::*;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn main() {
    kagura::run(Component::new(State, update, render), "app");
}

struct State;

struct Msg;

struct Sub;

fn update(_: &mut State, _: Msg) -> Cmd<Msg, Sub> {Cmd::none()}

fn render(_: &State) -> Html<Msg> {
    Html::h1(
        Attributes::new(),
        Events::new(),
        vec![
            Html::text("hello kagura"),
        ],
    )
}

Usage

Create component

kagura::Component::new(initial_state, update, render)

update and render is function :

update : fn(&mut State, Msg) -> Cmd<Msg, Sub>

render : fn(&State) -> Html<Msg>

Set a component to application

kagura::run(component, id_of_entry_point_in_html)

Render Element

kagura::Html::html_tag(attributes, events, children)

attributes : instance of kagura::Attributes

events : instance of kagura::Events

children : Vec<Html>

Example

<ul class="list example" id="my-list" data-fizz="bazz">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>

is made by

use kagura::Html;
use kagura::Attributes;
use kagura::Events;

Html::ul(
    Attributes::new()
        .class("list")
        .class("example")
        .id("my-list")
        .string("data-fizz", "bazz"),
    Events::new(),
    vec![
        Html::li(Attributes::new(), Events::new(), vec![Html::unsafe_text("foo")]),
        Html::li(Attributes::new(), Events::new(), vec![Html::unsafe_text("bar")]),
        Html::li(Attributes::new(), Events::new(), vec![Html::unsafe_text("baz")])
    ]
)

Render Component

kagura::Html::component(component)

component : instance of kagura::Component

Transmit message to a parent component

update can send message to parent compoent as Some(message).

Receive child message and bind to own message

component.subscribe(impl: Sub -> Box<Any>) can receive message from child component and bind to own message.

Example

fn render() -> Html<Msg> {
    Html::component(
        child_component::new().subscribe(|sub| match sub {
            child_component::Sub::Foo => Msg::Bar
        })
    )
}

mod child_component {
    fn new() -> Component<Msg, State, Sub> {
        Component::new(initial_state, update, render)
    }

    .
    .
    .
}

Cmd

Cmd::none()

Cmd::none() means nothing to do. If you return Cmd::none(), kagura will render.

Cmd::sub(sub: Sub)

If you send sub-message to parent component, use this.

Cmd::task(|resolve| some_task)

This works like promise in JavaScript. When you give msg to resolve, resolve dispatch msg to update and rerender. It will be useful for setTimeout, some heavy task, and so on.