Plugin with webassembly module

stepnivlk · 2021-10-03T18:39:42.238Z

Hello, first of all let me mention I'm new to Joplin plugin development as well as wasm.

I'm trying to create a plugin that calls into a wasm module created using rust/wasm-pack but keep failing.
You can find a dummy app in following repository: https://github.com/stepnivlk/joplin-wasm-plugin
The code compiled to wasm is simple function returning a string: https://github.com/stepnivlk/joplin-wasm-plugin/blob/2/hello-wasm/src/lib.rs and works fine imported in create-wasm-app: https://github.com/stepnivlk/joplin-wasm-plugin/blob/1/www/index.js

I can import the js wrapper in freshly generated joplin plugin: https://github.com/stepnivlk/joplin-wasm-plugin/blob/1/plugin/src/index.ts but npm run dist gives:

    ERROR in ../hello-wasm/pkg/hello_wasm_bg.wasm
    WebAssembly module is included in initial chunk.
    This is not allowed, because WebAssembly download and compilation must happen asynchronous.

The rearrangement as requested in the error didn't work.
I managed to make the plugin compile by applying following diff: https://github.com/stepnivlk/joplin-wasm-plugin/compare/1...2
but the compiled JS wrapper seems corrupted and the wasm file seems to be missing (by checking the source in dev tools of Joplin).

I'm probably missing something, I tried to search for wasm in Joplin but didn't find much. Is there a way how to create such a plugin?
Thanks!

roman_r_m · 2021-10-03T21:07:09.798Z

FWIW I've tried something similar but have given up after a few weeks.

If I recall correctly to get the wasm file I had to tweak the webpack config. Then there were issues with how Joplin loads plugins -- the main js file is loaded from one dir, while all other assets, including wasm, end up in another place. I had to patch Joplin to get around that.

EDIT

Had a look at my code, I've got this in my webpack config (though I'm not sure if that was my final version)

const pluginConfig = Object.assign({}, baseConfig, {
	...
	plugins: [
		...
		new WasmPackPlugin({
		  crateDirectory: path.resolve(__dirname, "wasm"),
		  withTypeScript: true,
		  outDir: "../pkg",
		}),
		...

stepnivlk · 2021-10-04T17:32:39.479Z

I see, I think wasm-pack-plugin won't fix the problem for me as if I get it correctly, the plugin just builds the crate. That's rather sad for me, I really wanted to use that wasm-compiled code.