Make it easier to run dart compiled to wasm in node.js about sdk

[mraleph]

cc @mkustermann @osa1

[osa1]

Is this a bug? Why ResultObject is assigned to dartInstance, not resultObject.instance?

This is the same issue described in #55412. WebAssembly.instantiate confusingly returns different types of values depending on the types of the arguments. In the generated .mjs we're expecting the module to be compiled with the "secondary overload": https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate_static#secondary_overload_%E2%80%94_taking_a_module_object_instance

I.e. you need to pass a WebAssembly.Module (instead of the binary for a Wasm module) to the instantiate function exported by the .mjs file.

Did I do something wrong here?

Pragmas starting with wasm: are for internal use only so shouldn't be used. We will hide them from users soon (#55733).

You should use js_interop: https://dart.dev/interop/js-interop/usage

With js_interop you should be able to just pass a JS string and it should work.

Closing as there isn't a bug here. (we have a tracking issue for hiding the wasm pragmas)

[osa1]

I missed the part that this is about supporting node.js. I think that's up to the product team to decide. Reopened the issue.

[lesnitsky]

I.e. you need to pass a WebAssembly.Module (instead of the binary for a Wasm module) to the instantiate function exported by the .mjs file.

Thanks, didn't know that, passing compiled module indeed works

You should use js_interop: https://dart.dev/interop/js-interop/usage

This also worked, so with my run.mjs updated to

import fs from "node:fs/promises";
import { instantiate, invoke } from "./lib/dart_wasm_node.mjs";

global.sayHi = (msg) => {
  console.log(msg);
};

const wasmBufferPromise = await fs.readFile("./lib/dart_wasm_node.wasm");
const wasmModule = await WebAssembly.compile(wasmBufferPromise);
const instance = await instantiate(wasmModule);

invoke(instance);

and dart_wasm_node.dart to:

import 'dart:async';
import 'dart:js_interop';

@JS()
external void sayHi(String message);

void main() async {
  var iterations = 0;
  Timer.periodic(Duration(seconds: 1), (timer) async {
    sayHi('$iterations');

    if (iterations == 5) {
      timer.cancel();
    }

    iterations++;
  });
}

everything works as expected 🎉

I missed the part that this is about supporting node.js. I think that's up to the product team to decide.

Not sure if anything else is required, so I'll leave it up to you to decide whether this issue should be kept open.

[lesnitsky]

Pragmas starting with wasm: are for internal use only so shouldn't be used. We will hide them from users soon (#55733).

What would be an alternative for wasm:export in js_interop land? Can't find anything in docs that would help me call something in dart from node.

Something along these lines:

@pragma('wasm:export', 'receive')
void receive(String message) {
  print('Received: $message');
}

const wasmBufferPromise = await fs.readFile("./lib/dart_wasm_node.wasm");
const wasmModule = await WebAssembly.compile(wasmBufferPromise);
const instance = await instantiate(wasmModule);

instance.exports.receive(stringToDartString(msg));

[mkustermann]

@lesnitsky The instance.exports are exports of wasm functions - but we don't support that "officially" yet (we'll hide it soon and expose a proper mechanism with sufficient checks later on). Using JS interop you can convert dart functions to JS wrapper functions which can be called from JS. One way is to make the Dart code convert dart functions to JSFunction and making them available to JS via setting properties (e.g. on globalThis).

See e.g. the example here #55715 (comment)

[lesnitsky]

@mkustermann Thanks! #55715 (comment) helped.

import fs from "node:fs/promises";
import { instantiate, invoke } from "./lib/dart_wasm_node.mjs";

const wasmBuffer = await fs.readFile("./lib/dart_wasm_node.wasm");
const wasmModule = await WebAssembly.compile(wasmBuffer);
const instance = await instantiate(wasmModule);

invoke(instance);

global.onDartMessage = (msg) => {
  console.log(msg);
  onJSMessage("hello from js");
};

import 'dart:async';
import 'dart:js_interop';

@JS()
external void onDartMessage(String message);

@JS()
external set onJSMessage(JSFunction handler);

void handler(String message) {
  print(message);
}

void main() async {
  onJSMessage = handler.toJS;

  var iterations = 0;

  Timer.periodic(Duration(seconds: 1), (timer) async {
    onDartMessage('hello from dart');

    if (iterations == 5) timer.cancel();
    iterations++;
  });
}