Kagura(nusa)/en
  • Hello World
    • Preparation
    • Creates a Page
  • Single Component
    • Nssesary Traits
    • Creates a Component
Powered by GitBook
On this page
  • Mounts Html to Real-DOM
  • to View Page
  1. Hello World

Creates a Page

creates a web page by kagura(nusa).

Mounts Html to Real-DOM

kagura::Runtime needs node with implements UpdateNode + RenderNode<VecDeque<FutureMsg>> + 'static. Therefore, a renderer is needead to render Html to real-DOM, and one of the renderer is BasicDomNode.

BasicDomNode needs two arguments. One is web_sys::Node as mount point. Another is a function which retuns Vec<Html>. The argument for this function will be used when you mount components to Html.

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::*;

#[wasm_bindgen(start)]
pub fn main() {
    wasm_bindgen_futures::spawn_local(async {
        kagura::Runtime::run(nusa::dom_node::BasicDomNode::new(entry_point(), |_| {
            vec![Html::h1(
                Attributes::new(),
                Events::new(),
                vec![Html::text("Hello World")],
            )]
        }))
        .await;
    });
}

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

to View Page

start wabpack-dev-server:

npm start
PreviousPreparationNextNssesary Traits

Last updated 3 years ago

access to:

localhost:8080