How to write a wrapper for an existing JS library?

[flosse]

I'd like to create a wrapper for an existing JS lib (in my case it's leaflet) but I couldn't find any documentation about how to do this.
Do I have to create e.g. a leaflet_wrapper.js (like the example @ rustwasm #importing-non-browser-js) and then create the actual leaflet.rs that is linked to the wrapper?

[limira]

👍
I am in a similar situation. I currently do what you suggest: have a wrapper.js and a wrapper.rs. It is very nice to be able to wrap an .rs directly around the JS library. I hesitate to ask because rustwasm focus on using wasm in a JS project rather than JS in a wasm project.

[Pauan]

I hesitate to ask because rustwasm focus on using wasm in a JS project rather than JS in a wasm project.

Please don't hesitate! It's true that for the MVP we focused on using Rust within JS projects, but there are absolutely plans to support using JS in Rust:

rustwasm/rfcs#7
rustwasm/rfcs#6
rustwasm/rfcs#8

[flosse]

I currently do what you suggest: have a wrapper.js and a wrapper.rs.

👍
Could you show me a working example with all your build steps?

[limira]

Could you show me a working example with all your build steps?

You didn't mention whether you want nodejs or not!?? If you are happy with it, I think the example you linked in your first comment should be enough (but not sure, 😄, because I never try it myself).

---

If you want to avoid nodejs, then I am sorry because I don't have a ready-to-use-build-steps list now! If you want to find the solution yourself, you can go through source code of one of two tools:

1. wasm-bindgen-test-runner - this is where I learn to run a front-end web app that allow non-browser-js without the need of a bundler.
2. simi-cli - I implement what I learn from wasm-bindgen-test-runner in this tool, and I use it - this is the reason why I don't have a ready-to-use-build-steps list available for you right now! (warning: it is a mess now, I am not happy with it but still too lazy to reorganize it).

From what I can recall, these are what involve: wasm-bindgen --browser, wasm2es6js, and a custom JS snippet like this, and a filename's extension trick.

If I can find enough free time in next few days, I will try to make a working example with a build.sh in case you still want it. (Edit: unfortunately, there is no easy build-steps, see the next comment)

[limira]

I forgot a problem about file name's extension. wasm-bindgen will generate a package_name.js that contains a

import * as wasm from './package_name_bg'; // Without extension

From what I understand, bundlers like webpack think it refer to the package_name_bg.wasm (also generated by wasm-bindgen). But if you process the .wasm with wasm2es6js, then it turn out that the mentioned line refer to the package_name_bg.js file generated by wasm2es6js. If you leave the mentioned line intact, your server must do a trick like the wasm-bindgen-test-runner do here. In simi-cli I choose to append a .js to the filename.

So, there is no easy build-steps to make it works without webpack. (Unless you know how to search and replace text from the terminal).

[alexcrichton]

Thanks for the report, and this is definitely something we want to support! The RFC's linked by @Pauan have all our future plans, so I'm gonna close this in favor of those.