0
<< >>
09 2023
-: wasm, rust yew

, . .

, : JavaScript WASM. , , C++, GO Rust.

, wasm. , wasm : JS, , , . : JS, , . , WASM . -, , . , , . . - , - (?) JS, C Rust. , - .

Rust , . yew ( Rust wasm) . , - React. , . React , .

Rust, . yew, ( ) (), .wasm (240 ), , :

Compact. :
) , 12345 (: Scale HEX, 2 : 0xe5c0)
) hex-, 0x, : 0xe5c0 (: 12345)
) HEX-, 0X (), ,

, , hex="0.4.3" parity-scale-codec="3.1.5", .

( ), :

Cargo.toml

[package]
name="touch_wasm"
version="0.1.0"
authors=["LLeo<lleo@lleo.me>"]
edition="2021"
license="MITORApache-2.0"

[dependencies]
yew={path="/home/work/RUST/web/yew-yew-v0.19.3/packages/yew"}
gloo-utils="0.1"
gloo="0.8"
js-sys="0.3"

hex="0.4.3"
parity-scale-codec="3.1.5"

index.html

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Yewtouch_wasm</title>

<script>functionwasmt_go(){
document.querySelector('#wasmt_in').innerHTML=document.querySelector('#wasmt_input').value;
document.querySelector('#wasmt_button').click();
}</script>

</head><body>

<divid="wasmt_in"style="display:none"></div>
<divid="wasmt_buka"style="border:1pxsolidred;display:inline-block;position:relative;padding:10px;"></div>
<div>
<inputid="wasmt_input"size="32"onchange="wasmt_go()">
<inputtype="button"value="GO"onclick="wasmt_go()">
</div>

</body></html>

src/main.rs

//yew::set_event_bubbling(false);

useyew::{prelude::*};//,html::IntoPropValue
usejs_sys::Date;
useparity_scale_codec::{Compact,Decode,Encode};

//Definethepossiblemessageswhichcanbesenttothecomponent
pubenumMsg{
Set,
}

pubstructApp{
string:String,
value:i64,//Thiswillstorethecountervalue
}

implComponentforApp{
typeMessage=Msg;
typeProperties=();

fncreate(_ctx:&Context<Self>)->Self{
Self{value:0,string:"started".to_string()}
}

fnupdate(&mutself,_ctx:&Context<Self>,msg:Self::Message)->bool{
matchmsg{
Msg::Set=>{
letdocument=gloo_utils::document();
letmutmoo=document.query_selector("#wasmt_in").unwrap().unwrap().inner_html();

letstr=moo.clone();

ifstr.starts_with("0x"){//SCALEHEX

letstr=&str[2..];//'0x'
letmutbytes:&[u8]=&hex::decode(str).unwrap_or((&[0]).to_vec());//HEX
letscale=Compact::<u128>::decode(&mutbytes)
.unwrap_or(parity_scale_codec::Compact(0));//SCALE
letr=bytes.len();//scale
ifr==0{
moo=format!("scale-{}={:?}",&str,&scale);
}else{
letost=hex::encode(bytes);//
moo=format!("scale-{}={:?}{}",
&str[0..(str.len()-ost.len())],
&scale,
format!("{}:{ost}",ost.len()/2)
);
}

}elseifstr.starts_with("0X"){//HEXSCALE
letstr=&str[2..];//0x
letbytes:&[u8]=&hex::decode(str).unwrap_or((&[0]).to_vec());//HEX
letmutbytes128:[u8;16]=Default::default();//u128
bytes128[0..bytes.len()].copy_from_slice(&bytes);//
letvalue=u128::from_le_bytes(bytes128);//u128
moo=format!("hex-{}={}",&str,value);

}else{
//str.as_str()
letvalue:u128=u128::from_str_radix(str.as_str(),10).unwrap_or(0);//u128
letscale=Compact(value).encode();//Compact
lethex=hex::encode(scale);//HEX
moo=format!(":{}={}scale-hex({}):0x{}",&str,value,hex.len()/2,hex);
}

self.string=moo;//moo.to_uppercase();//format!("[{:?}[{:?}]]","er".to_string(),moo);
self.value+=1;
true//Returntruetocausethedisplayedchangetoupdate
}
}
}

fnview(&self,ctx:&Context<Self>)->Html{
letd=Date::new_0();
lett=format!("{:04}-{:02}-{:02}{:02}:{:02}:{:02}",
d.get_full_year(),d.get_month()+1,d.get_day(),
d.get_hours(),d.get_minutes(),d.get_seconds()
);

html!{
<div>{self.string.clone()}</div>
//hiddendiv
<divstyle="width:0;height:0;"id="wasmt_button"onclick={ctx.link().callback(|_|Msg::Set)}></div>
//updatetime
<pstyle="font-size:8px">{t}{""}{self.value}</p>
</>}
}
}

fnmain(){
letdocument=gloo_utils::document();
letmount_point=document.query_selector("#wasmt_buka").unwrap().unwrap();
yew::start_app_in_element::<App>(mount_point);
}

, wasm JS?


UPD: , React, , , yew, wasm, . . , . , React, Facebook, Windows . , , , . , .

<< >>

- .