Import .wasm files

[tel]

Description

It'd be excellent to be able to import .wasm modules in ojs blocks. Currently there's an "Unknown language in file ..." error that arises when importing a wasm module or even a Javascript file providing a shim around a wasm module.

import { greet } from "./pkg/wasm_tut.js"

// wasm_tut.js
import * as wasm from "./wasm_tut_bg.wasm"; // likely what is causing the error
import { __wbg_set_wasm } from "./wasm_tut_bg.js";
__wbg_set_wasm(wasm);
export * from "./wasm_tut_bg.js";

My particular use case is to be able to import models that I've written in Rust into Quarto in order to execute them interactively. To that end, I'm using the wasm-pack tool to output .wasm files and auto-generated shim .js modules.

Thanks!

[mcanouil]

This is a question for Observable.
Quarto team has no control on what Observable can or cannot do.

[tel]

I agree the import mechanism may not directly load local packages and that’s on Observable. What comes to mind is that it’d be nice to be able to configure the location of a package by name, similar to webpack’s “packages” config.

I could then require(“mypkg”) and it would not attempt to download it from jsdeliver but instead use the local package.

I believe the resolver used by the require function is injected by the user of Observable’s Library. So I think this could be done via Quarto but I’m not entirely confident.

I’m also going to experiment with putting the wasm module directly into node_modules though this is a bit undesirable over having this explicitly in configuration.

[mcanouil]

@cscheid is the one that could help here but he is not available for a few days.

[tel]

Thanks for making the connection!

[tel]

A bit more thinking about this, the modules are loaded browserside so there's no node_modules directory. I tried using another webserver to host the module, but this is impeded by a CORS policy. I could imagine this being possible through Quarto using the FileAttachment technology.

[cscheid]

I think OJS's require expects an ESM module instead. have you tried setting everything up with in a small, handwritten .js file first to make sure you know what's happening at every step of the way? wasm-pack will add a lot of extra layers of complexity, and I think you'd benefit from making sure you understand what's happening in simpler cases first.

[tel]

I hadn't yet, I was trying to get my head around how the various larger scale pieces were working. I'm also presently satisfied with using the import statement, though it's likely not very portable.

[younes-io]

@tel I'd like to also import wasm files into quarto.. Could you please share how did you manage to do that ? Really appreciate it!
@cscheid : if you came up, since then, with a better way, could you please share ?
Thank you all

[tel]

I ended up writing a block like this

pkg = {
  const file = await FileAttachment("pkg/model.js").url();
  const module = await import(file);
  module.default = await module.default();
  module.set_panic_hook();
  return module;
}

where pkg contains the output from calling warm-pack

wasm-pack build -t web -d ../pkg/

[younes-io]

okay, thank you