Commit f478ff8
Clean up README.md and examples
Changed files (4)
modifiedREADME.mdmodifiedexamples/callbacks/Cargo.tomlmodifiedexamples/clickcounter/Cargo.tomlmodifiedsrc/lib.rs
Diff
@@ -11,35 +11,50 @@ with the browser. ## Example: ```rust use kaja_web::prelude::*;+use std::sync::RwLock;++struct AppData {+ current_count: i32,+}++pub static APP_DATA: RwLock<AppData> = RwLock::new(AppData { current_count: 0 }); #[callback(incrementClickCounter)] fn increment_click_counter() {- // update the click counter here+ let mut app_data = APP_DATA.write().unwrap();+ app_data.current_count += 1;+ update_counter_display(&app_data); } -fn main() {- // Init callbacks tomake sure functions annotated with `#[callback]`- // are available as global functions on the DOM- init_callbacks(); -+fn update_counter_display(app_data: &AppData) { let content = html! {{- <div class="click-count"></div>+ <div class="click-count">$(app_data.current_count)</div> <button onclick="incrementClickCounter()">Click me</button> }}; inner_html(".main-content", content); } -// This example requres an html file with this content:-// <div class="main-content"></div>+fn main() {+ // Init callbacks to make sure functions annotated with `#[callback]`+ // are available as global functions on the DOM+ init_callbacks(); ++ let mut app_data = APP_DATA.write().unwrap();+ update_counter_display(&app_data);+}+```++This example requres an html file with this content:+```html+<div class="main-content"></div> ``` -For more example see: the crates `kaja-html-macro` and `kaja-callback-macro` or-look in the examples directory.+See examples/clickcounter for full example. ## The Macros-The HTML code is generated using the `kaja_html_macro` crate. The callback-functions are definedusing the `kaja_callback_macro` crate. Helper functions+The HTML code is generated using the `kaja-html-macro` crate. The callback+functions are definedusing the `kaja-callback-macro` crate. Helper functions are added in this crate and reexportedfrom the `kaja_web::prelude` module. ## Author and Contact@@ -15,10 +15,9 @@ gloo = "0.12" kaja-html-macro = "1.0.3" serde = { version = "1.0.228", features = ["derive"] } serde_json = "1.0.150"-# Ensure uuid has a wasm-compatible RNG source (uses Web Crypto via `js` feature) uuid = { version = "1.23.2", features = ["js", "v4"] } console_error_panic_hook = "0.1.7"-kaja-callback-macro = { version = "0.1.0", path = "../../../kaja-callback-macro" }+kaja-callback-macro = { version = "1.0.3" } inventory = "0.3.24" serde-wasm-bindgen = "0.5" wasm-bindgen-futures = "0.4.72"@@ -9,18 +9,14 @@ crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2.122" kaja-web = { path = "../.." }--# No inventory/ctor/callback-macro on wasm example: exports use wasm_bindgen directly js-sys = "0.3" web-sys = { version = "0.3.99", features = ["Element", "HtmlElement", "NodeList"] }- gloo = "0.12" kaja-html-macro = "1.0.3" serde = { version = "1.0.228", features = ["derive"] } serde_json = "1.0.150"-# Ensure uuid has a wasm-compatible RNG source (uses Web Crypto via `js` feature) uuid = { version = "1.23.2", features = ["js", "v4"] } console_error_panic_hook = "0.1.7"-kaja-callback-macro = { version = "0.1.0", path = "../../../kaja-callback-macro" }+kaja-callback-macro = { version = "1.0.3" } inventory = "0.3.24" serde-wasm-bindgen = "0.5"@@ -1,6 +1,8 @@+#![doc = include_str!("../README.md")]+ use gloo_console::error; use wasm_bindgen::JsCast;-use web_sys::{window, Element, HtmlDocument, HtmlElement, HtmlInputElement, NodeList};+use web_sys::{Element, HtmlDocument, HtmlElement, HtmlInputElement, NodeList}; pub mod prelude; @@ -22,23 +24,23 @@ inventory::collect!(CallbackRegistration); /// Register callbacks that can be used in JS to run Rust functions in the WASM bundle. /// This needs to run when the WASM bundle is loaded.-/// /// ```rust /// #[wasm_bindgen(start)] /// pub fn init() { /// init_callbacks(); /// }+/// ``` /// /// The Rust functions is marked with the `#[callback]` attribut. /// ```rust-/// #[callback(test)]-/// pub fn test() {+/// #[callback(testCallback)]+/// pub fn test_callback() { /// } /// ``` /// /// ```rust /// let html = html!{{-/// <button onclick="test()">Test</button>+/// <button onclick="testCallback()">Test</button> /// }}; /// ``` pub fn init_callbacks() {