Creates a Component

the sample of a component

HelloComponent

Kagura recomends to create a component by file. Basically, file and component have same name.

src/hello_component.rs
use kagura::pelude::*;
use nusa::prelude::*;

pub struct Props {}

pub enum Msg {}

pub enum On {}

pub struct HelloComponent {}

impl Component for HelloComponent {
    type Props = Props;
    type Msg = Msg;
    type Event = On;
}

impl HtmlComponent for HelloComponent {}

impl Constructor for HelloComponent {
    fn constructor(_props: Self::Props) -> Self {
        Self {}
    }
}

impl Update for HelloComponent {}

impl Render<Html> for HelloComponent {
    type Children = ();
    fn render(&self, _children: Self::Children) -> Html {
        Html::h1(
            Attributes::new(),
            Events::new(),
            vec![Html::text("Hello Component")]
        )
    }
}

Mounts a Component

src/lib.rs
extern crate js_sys;
extern crate kagura;
extern crate nusa;
extern crate wasm_bindgen;
extern crate wasm_bindgen_futures;
extern crate web_sys;

use nusa::html::html_element::Attributes;
use nusa::html::html_element::Events;
use nusa::Html;
use wasm_bindgen::prelude::*;

mod hello_component;
use hello_component::HelloComponent;

#[wasm_bindgen(start)]
pub fn main() {
    wasm_bindgen_futures::spawn_local(kagura::Runtime::run(nusa::dom_node::BasicDomNode::new(
        entry_point(),
        |this| {
            vec![HelloComponent::new(
                this,
                None,
                hello_component::Props {},
                Sub::none(),
                ()
            )]
        },
    )));
}

fn entry_point() -> web_sys::Node {
    web_sys::window()
        .unwrap()
        .document()
        .unwrap()
        .get_element_by_id("app")
        .unwrap()
        .into()
}
PreviousNssesary Traits

Last updated