![logo](kagura.png) # Kagura Frontend frame-work for wasm on Rust.

Tutorial

In Japanese

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

Hello World

```rust extern crate kagura; extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

[wasm_bindgen(start)]

pub fn main() { kagura::run(kagura::Component::new(State, update, render), "app"); }

struct State;

struct Msg;

struct Sub;

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

fn render(: &State) -> kagura::Html { use kagura::Html; use kagura::Attributes; use kagura::Events; Html::h1( Attributes::new(), Events::new(), vec![ Html::unsafetext("hello kagura"), ], ) } ```

Usage

Create component

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

update and render is function :

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

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

Set a component to application

rust kagura::run(component, id_of_entry_point_in_html)

Render Element

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

attributes : instance of kagura::Attributes

events : instance of kagura::Events

children : Vec<Html>

Example

```Html

```

is made by

```rust 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::unsafetext("foo")]), Html::li(Attributes::new(), Events::new(), vec![Html::unsafetext("bar")]), Html::li(Attributes::new(), Events::new(), vec![Html::unsafe_text("baz")]) ] ) ```

Render Component

rust 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

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

mod childcomponent { fn new() -> Component { Component::new(initialstate, 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.