If I want to access the same <div> element from HTML in Rust and JS. Should I access them both from Rust and JS? Or, should I create a variable in JS, containing the <div> element and pass that to Rust to read/use? Does it make any difference?
What do you mean by "accessing a DIV element in Rust"?
1 Like
TLDR:
You don't touch javascript objects from wasm.
You don't pass javascript objects to wasm. Your javascript functions can send numbers into wasm and that is about it. Also you can set up memory that wasm and javascript can share but you do not put javascript object in that memory. You but bytes into that memory. If you use any web api's ( DOM access) you will be using javascript calls. If you want to call web api's from wasm, then you need to have bindings / little javascript functions that you call from wasm that then call the target javascript function for you. So if you have some data more advanced than a number, say a "rust string of text", you must put those bytes into a memory that is shared by javascript and wasm. Then the javascript binding function will pull out those bytes, fix them so that they are "javascript text" and then call the API you were calling. This is "automagic" if you figure out how to use wasm-bindgen and websys.
If you do any web stuff I suggest reading the mozilla MDN docs. In this case for wasm will give every detail of how wasm interacts with html / javascript / web apis.
If you want to see an example of raw rust wasm, not using wasm-bindgen. With rust calling javascript sending text, wasm accessing DOM, and javascript also calling rust. This example also shows some wasm access of DOM, canvas and gl context. The trick they used so that wasm can identify a javascript object is to store the javascript objects in a javascript array and just send the index of the object to wasm. Then the wasm can hold that number and when it calls back to javascript, it can send that number and javascript can pull that object out of it's list by the number and use the object.
2 Likes
I need to figure this out for sure. Thx for the respone, the example shows a lot too!
This section of mdn wasm docs in the part about emscripten there is this paragraph that helped me understand what needs to be done.
By itself, WebAssembly cannot currently directly access the DOM; it can only call JavaScript, passing in integer and floating point primitive data types. Thus, to access any Web API, WebAssembly needs to call out to JavaScript, which then makes the Web API call. Emscripten therefore creates the HTML and JavaScript glue code needed to achieve this.
In rust land wasm-bindgen is kind of emscripten.
And for understanding shared wasm memory, I read this a dozen times.
Also another thing you might want to notice. If you look at the hello_triangle example and in the index.html file there is some javascript. Notice this line and the use of "env" in importObject.
And if you read the understanding wasm text format docs you will see an importObject like this.
var importObject = {
console: {
log(arg) {
console.log(arg);
}
}
};
Without the 'env' section. If you compile a rust to a wasm file and turn that into wasm text you will find that rust - wasm will reference the "env" object.
If you want to do it manually you can read wasm docs on mdn all day long and they will not tell you that rust wasm needs the "env" in the importObject.
1 Like
I cannot get anything to work sadly, since wasm-pack build --target web already makes a js file for the wasm conversion. I can't get the other examples don't work separately cause of that. Can't even import a struct from Rust since I can't find how to do that cause of it haha
I skipped have not read the wasm-bindgen and wasm-pack documentation as my needs / projects are very small. Post what you tried, and what errors you get and someone will be able to help.
Already had a similar question regarding importing functions with wasm pack web, but haven't got any response yet so far.
Most people are probably using npm/webpack I'm assuming since finding stuff without bundlers or framework seems scarce.
Evan, read simon's post in this thread...
1 Like
Noice. Thanks
This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.