20 releases
0.1.19 | Nov 16, 2022 |
---|---|
0.1.18 | Aug 17, 2022 |
0.1.16 | Jul 10, 2022 |
0.1.11 | Jun 20, 2022 |
0.1.8 | May 28, 2022 |
#925 in Development tools
34 downloads per month
675KB
1.5K
SLoC
Collections of useful macros for wasm
demo
Cargo.toml
[package]
name = "demo_wasm"
version = "0.1.0"
edition = "2021"
[dependencies]
wasm_macro="0.1.8"
web-sys = { version = "0.3.57", features = [
'Document',
'Element',
'HtmlElement',
'Node',
'Window',
"WindowClient",
] }
dioxus = { version = "0.2.4", features = ["web", "router"] }
console_error_panic_hook = "0.1"
tracing-wasm = "0.2"
tracing = "0.1"
index.html
<!-- the same dir in Cargo.toml -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main"></div>
</body>
</html>
main.rs
fn main(){
run::launch();
}
pub mod run{
use dioxus::prelude::*;
pub fn launch() {
dioxus::web::launch(app);
}
pub fn app(cx: Scope) -> Element {
use wasm_macro::*;
console_error_panic_hook::set_once();
tracing_wasm::set_as_global_default();
cx.render(rsx! {
div{
onclick:move|_|{
// location_assign!("/demo");
// info!("{}",location_herf!());
// location_reload!();
let main_div = document_query_selector_all!(".main");
match main_div.get(0){ //frist of NodeList
Some(div) => {
div.append_child(&document_create_element!("div").clone_node().unwrap()).unwrap();
},
None => {},
}
console_log!(document_inner_html!(".main"));
console_log!(document_base_uri!());
document_set_inner_html!(".main","<h1>hello</h1>")
},
class:"main",
"test"
}
})
}
}
then run
trunk serve
All Examples
use wasm_macro::*;
//location_assign
onclick:move|_|{
location_assign!("/demo");// nevigate to /demo
}
//location_herf
onclick:move|_|{
let herf = location_herf!();
console_log!(herf); //get current location herf
}
//location_reload
onclick:move|_|{
location_reload!(); //reload current location
}
//query_selector
onclick:move|_|{
let main_div = document_query_selector!(".main");
match main_div{
Some(div) => {
div.append_child(&document_create_element!("div").clone_node().unwrap());
},
None => {},
}
}
//query_selector_all
onclick:move|_|{
let main_div = document_query_selector_all!(".main");
match main_div.get(0){ //frist of NodeList
Some(div) => {
div.append_child(&document_create_element!("div").clone_node().unwrap());
},
None => {},
}
// get inner_html
onclick:move|_|{
console_log!(document_inner_html!(".main"));
}
//set inner_html
onclick:move|_|{
document_set_inner_html!(".main","<h1>hello</h1>");
}
//console.log()
onclick:move|_|{
console_log!(document_inner_html!(".main"));
}
//document_base_uri!() return base_uri
use wasm_macro::*;
onclick:move|_|{
console_log!(document_base_uri!());
}
use wasm_macro::*;
onclick:move|_|{
console_log!(element_get_attribute!(".main","class"));//"main"
}
Dependencies
~7–9.5MB
~175K SLoC