Wasm(-pack) without Node.js/npm

help
#1

I've been playing around with no_std wasm, based on Making really tiny WebAssembly graphics demos - Cliffle. This has worked fine and I think I understand the lower level basics sufficiently to move on to std and higher level tools like as wasm-pack.

But there's a catch: I don't want to have to use Node.js/npm -- I want to use my little Rocket-based server.

I built my library wlib using wasm-pack build --target web. The Rust wasm library has a simple greet() function which does:

#[wasm_bindgen]
pub fn greet(name: &str) {
  alert(&format!("Hello, {}!", name));
}

(alert is imported, but it's irrelevant to my question)

I copied wlib.js and wlib_bg.wasm to a StaticFiles mount in the Rocket server.

In my index.html I have:

    <script type="module" src="./wlib.js"></script>
    <script type="module" src="./wlib_test.js"></script>

Naively I tried the following in wlib_test.js:

import { greet } from './wlib.js';
greet("gronk");

But this causes an error:

Uncaught TypeError: wasm is undefined

The offending line is the var ptr0 line in the generated wlib.js:

export function greet(name) {
    var ptr0 = passStringToWasm0(name, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
    var len0 = WASM_VECTOR_LEN;
    wasm.greet(ptr0, len0);
}

I know way too little JavaScript to know why this happens; I can see that wasm is declared at the top of the module, so I'm not sure why it can't see the wasm variable.

I assume the problem is that I'm trying to short-circuit this whole process too much, but my gut feeling is that this should be possible.

Any idea how I go about importing/using my module using the wasm-pack generated wrapper, without involving npm/Node.js?

1 Like
#2

Ok, it looks like I had misunderstood init() -- I assumed it was called implicitly.

Edit: Yes, that was it.

import init, { greet } from './wlib.js';
async function run() {
  await init();
  greet("gronk");
}

run();
1 Like