How to use js-sys WebAssembly::instantiate_buffer from Rust to import another wasm module

[jsoneaday]

I've looked at the js examples for WebAssembly.instantiate and the values given for the importObjects parameter, but I'm still confused as to what this importObjects parameter is supposed to be. In my case I'm trying to create a wasm module that wraps some js, so I can use it inside my other wasm modules. The first set of code I show below is my wrapper wasm module. As you can see I import Irys and the new constructor and export a function called connect_to_irys. Then the next code is my failing attempt at importing this wrapper module into another wasm module. I get the error "Import #0 module="./wasm_game_of_life_bg.js": module is not an object or function" at the line WebAssembly::instantiate_buffer.
For this sample code what is the importObjects parameter supposed to look like? What is importObjects purpose?

the wrapper module

#[wasm_bindgen(module = "/src/irys_interface.js")]
extern "C" {
    pub type Irys; // this type and the constructor come from js code defined in the irys_interface.js file
    #[wasm_bindgen(constructor)]
    pub fn new(url: Option<String>, token: Option<String>, key: Option<String>) -> Irys;
}

#[wasm_bindgen]
pub fn connect_to_irys() -> Irys {
    let irys = Irys::new(None, None, None);
    //println!("irys {}", irys);
    irys
}

The module importing the wrapper module:

let a = JsFuture::from(WebAssembly::instantiate_buffer(WASM, &Object::new())).await.unwrap();
let b: WebAssembly::Instance = Reflect::get(&a, &"instance".into()).unwrap().dyn_into().unwrap();
let c = b.exports();
let connect_to_irys = Reflect::get(c.as_ref(), &"connect_to_irys".into()).unwrap()
            .dyn_into::<Function>()
            .expect("connect_to_irys export wasn't a function");
let irys = connect_to_irys.call0(&JsValue::undefined());
log!("irys {:?}", irys);

[daxpedda]

See the MDN documentation.

Though your error message seems to indicate that there is a problem with the module you passed.

I'm happy to look at it more closely if you put together a very minimal example.

[jsoneaday]

Hi @daxpedda thank you for helping me. Let me ask a slightly different question. Please correct my understanding if it is wrong. Wasm is its own technology and runtime. A wasm module does not store any js with its module. Therefore the imports are needed in order to provide any js that may be used by the wasm module.
In my case the imports are coming from an npm package. How do I add them to the instantiate_buffer call?

Also in the mdn examples there is this sample for the importObject:
const importObject = { imports: { imported_func: (arg) => console.log(arg) } };
Does this mean all import code uses this format where "imports" is the root object and then each member, like imported_func, is then defined inside? How do I create this structure in type safe Rust? Are there any examples?

[daxpedda]

Please correct my understanding if it is wrong. Wasm is its own technology and runtime. A wasm module does not store any js with its module. Therefore the imports are needed in order to provide any js that may be used by the wasm module.

I'm certainly no expert here, but without going into externref I believe this is correct.

In my case the imports are coming from an npm package. How do I add them to the instantiate_buffer call?

Also in the mdn examples there is this sample for the importObject: const importObject = { imports: { imported_func: (arg) => console.log(arg) } }; Does this mean all import code uses this format where "imports" is the root object and then each member, like imported_func, is then defined inside?

imports is going to be the module you are importing from. E.g.:

#[link(wasm_import_module = "imports")]
extern "C" {
	fn imported_func(arg: i32);
}

How do I create this structure in type safe Rust?

You can create any JS object with js_sys::Object and js_sys::Reflect::set(). E.g. taking from your code:

let imports = Object::new();
let imported_func = Closure::<dyn Fn(i32)>::new(|arg: i32| console::log_1(&arg.into()));
Reflect::set(&imports, &"imported_func".into(), imported_func.as_ref().unchecked_ref()).unwrap();

let a = JsFuture::from(WebAssembly::instantiate_buffer(WASM, &imports)).await.unwrap();
...

Are there any examples?

I'm not aware of any examples, but let me know if you still have any trouble with the information so far.

[jsoneaday]

Ok this is very helpful thank you. The veil is lifting. According to docs, https://rustwasm.github.io/docs/book/reference/js-ffi.html, the wasm_import_module syntax is used when the wasm module is running inside a js host. But in my case my wasm module is not running inside a js runtime. I'm actually calling a wasm module, let's call it A, from another wasm module, let's it call it B. And module A is getting its members from an entire js file.
So then my question is I created a small js file in order to control what I'm exposing, but how do I get all the actual code inside the @irys/sdk module into module A?

This is the rust wasm module A

#[wasm_bindgen(module = "/src/irys_interface.js")]
extern "C" {
    pub type Irys;

    #[wasm_bindgen(constructor)]
    pub fn new(params: IrysConstructorConfig) -> Irys;
}

This is the js being used by A

import Irys from "@irys/sdk";

export function getIrysInstance(url: string, token: string, key: object) {
  return new Irys({ url, token, key });
}

[daxpedda]

According to docs, https://rustwasm.github.io/docs/book/reference/js-ffi.html, the wasm_import_module syntax is used when the wasm module is running inside a js host.

wasm_import_module happens on the Wasm level, the runtime doesn't have an effect on it, apart from it having to actually supply this import. Because wasm-bindgen handles its own importing, you should probably not use wasm_import_module when using wasm-bindgen.

But in my case my wasm module is not running inside a js runtime.

It's still running inside a JS runtime (otherwise you wouldn't be able to use wasm-bindgen), but Wasm can only use imports you give it to, no matter what runtime it's running in.

---

I'm unsure where exactly you are stuck, but I'm also unsure what you are trying to do. If you are trying to sandbox module A, using wasm-bindgen in module A is the wrong way to do it. In the context we are talking about wasm-bindgen is basically an import generator, obviously this doesn't make sense if your goal is to sandbox it, because then you are not in control of the imports.

If you are not trying to sandbox module A, then it's fine to use wasm-bindgen, though I can't really decipher from your code above what you are trying to do.

It would be best if you can make a self-contained minimal example or make a repo if that's easier.

[jsoneaday]

I'm new to wasm so it's a bit hard even asking the right questions. Anyway thank you for your help. I'll noodle on this a bit more and come back if I still need some help