Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wasm support? #7

Open
Boscop opened this issue May 22, 2018 · 9 comments
Open

Wasm support? #7

Boscop opened this issue May 22, 2018 · 9 comments

Comments

@Boscop
Copy link

Boscop commented May 22, 2018

Does this support the inlining of .wasm files?
It would be very useful for building standalone web apps! :)

@rse
Copy link
Owner

rse commented Jun 24, 2018

Currently it does not know anything about .wasm files? How should they be handled during inlining? What is the mechanism to inline .wasm files? How are they referenced at all officially?

@Boscop
Copy link
Author

Boscop commented Jul 23, 2018

Sorry for the delay, I was busy with other things..

Wasm can be inlined as a Uint8Array:
https://dzone.com/articles/webassembly-wasmfiddle-and-inline-webassembly-modu

Related:
https://github.com/xtuc/inline-wast
WebAssembly/design#1129 (comment)
WebAssembly/design#1206

I'm really looking forward to being able to inline .wasm files with this inline-assets cli tool.
My use case is:
I'm embedding a web-based GUI into my Rust application and show it in an embedded browser (using web-view). I'm writing the frontend in Rust using yew and compiling to WebAssembly (using cargo-web).
Since I have to pass the whole frontend as a single urlencoded html page to the embedded web-view (if I don't want to serve it from a local server (which requires searching for a free port etc.)), I have to inline all assets into the index.html page.
You can see my current pipeline for the Todo PureScript example here:
https://github.com/Boscop/web-view/blob/master/examples/todo-ps/package.json#L10
In this example, after building the app.js I do inline-assets --htmlmin --cssmin index.html dist/bundle.html, then I embed it like this:
https://github.com/Boscop/web-view/blob/69519d102bedf16ec42d6a8f73f044323270bacc/examples/todo-purescript.rs#L14
I want to do inline all assets similarly (including my frontend .wasm file) when writing the frontend in Rust..

(Now you may be thinking "but IE11's MSHTML engine doesn't support WebAssembly". Well, there's another crate that uses Edge, and we are probably going to unify both into one crate that uses Edge when it's available but IE as fallback (with the frontend compiled to asm.js then) :)

@Boscop
Copy link
Author

Boscop commented Apr 6, 2020

@rse Any update on this? :)

Wasm code can be embedded as Uint8Array:

var wasmCode = new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 135, 128, 128, 128, 0, 1, 96, 2, 127, 127, 1, 127, 3, 130, 128, 128, 128, 0, 1, 0, 4, 132, 128, 128, 128, 0, 1, 112, 0, 0, 5, 131, 128, 128, 128, 0, 1, 0, 1, 6, 129, 128, 128, 128, 0, 0, 7, 144, 128, 128, 128, 0, 2, 6, 109, 101, 109, 111, 114, 121, 2, 0, 3, 97, 100, 100, 0, 0, 10, 141, 128, 128, 128, 0, 1, 135, 128, 128, 128, 0, 0, 32, 1, 32, 0, 106, 11]);
WebAssembly.compile(wasmCode).then(wasmModule => 
  WebAssembly.instantiate(wasmModule, g_importObject)
).then(instance =>
  alert(instance.exports.add(1, 2))
);

as described in this link:
https://dzone.com/articles/webassembly-wasmfiddle-and-inline-webassembly-modu

@mbuscemi
Copy link

mbuscemi commented Apr 13, 2020

I just started a Rust web-view/Yew project, and I have just encountered this issue. I would be very interested in helping with a solution for this problem.

@Boscop The JS code that is generated by Yew and which reads in the wasm file is quite complex. How does one go about generating the Uint8Array from a wasm file? I'd like to see if I can make this work manually.

@Boscop
Copy link
Author

Boscop commented Apr 13, 2020

@mbuscemi You just need to read the file into a Vec<u8> with fs::read and print the result like

println!("var wasmCode = new Uint8Array({:?});", fs::read("app.wasm")?);

But this can be optimized by removing the spaces after each comma to reduce the file size of the resulting js code :)

With nodejs you could do:

const fs = require('fs');
const wasmSource = new Uint8Array(fs.readFileSync("app.wasm"));

and then print that.

@mbuscemi
Copy link

@Boscop Thanks for your help! I was able to achieve inline loading of my wasm file like this.

This compiles and runs with a simple GUI, but the very next things I did was try to set up communication between the two layers. I found wasm_bindgen and tried that, but I get JS runtime errors when just including the wasm_bindgen module. The code is here.

@Boscop
Copy link
Author

Boscop commented Apr 14, 2020

@mbuscemi Nice to hear that you're making progress. Which errors are you getting?
Are you building with cargo web?

@mbuscemi
Copy link

mbuscemi commented Apr 14, 2020

@Boscop I've moved on to trying stdweb to make the calls, which definitely works going from Yew to web-view. Still working on going the other direction.

I don't remember the exact error message. Something about some element of wasm_bindgen not being an object. If you clone my repo and execute make process run you should get it.

@mbuscemi
Copy link

@Boscop I just pushed some changes to the yew_integration branch. If you want to reproduce that error, you'll want to reset to this commit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants