Alternative Callback Method

[JohnDog3112]

While working on the event library, I was wondering if it was possible to pass in direct functions rather than registering one by name and then passing the returned id into callback functions. So, I came up with this small example of an approach that can do just that.

It's impossible (as far as I can tell) to pass functions from C and call them from JavaScript. However, that can be circumvented by having a function in C that can call it on behalf of JS. The main problem comes in passing the arguments. Originally, I wanted the functions to have a similar structure to the current implementation where each value is passed as its own argument. However, WASM doesn't support varadic (variable number) arguments. So, the only approach I could think of is to pass an array of the arguments along with the length. With that, I came up with the following implementation:

C

typedef void (CallbackFunc(int*, int));

__attribute__((export_name("callbackCaller")))
void callback_caller(CallbackFunc* callback_func, int* parameters, int len) {
   callback_func(parameters, len);
   free(parameters);
}

This implementation expects that parameters is allocated on the heap and will simply call the provided function pointer with the parameters list and length before freeing the parameters list and returning.

For example usage I made this:

C

__attribute__((import_name("testSingleShotTimer")))
void test_single_shot_timer(CallbackFunc* callback, int timeout_ms);

__attribute__((import_name("testMouseMovement")))
void test_mouse_movement(CallbackFunc* callback);


void print_hello(int* parameters, int len) {
   printf("hello!\n");
   test_single_shot_timer(print_hello, 1000);
}

void mouse_event(int* parameters, int len) {
   assert(len == 2);
   printf("(%d, %d)\n", parameters[0], parameters[1]);
}

__attribute__((export_name("test")))
void test() {
   test_single_shot_timer(print_hello, 1000);
   test_mouse_movement(mouse_event);
}

TS

testSingleShotTimer(mod: IWasmModule|IWasmModuleAsync, funcPointer: number, timeoutMS: number) {
   setTimeout(
      async () => {
         await mod.callC(["callbackCaller", funcPointer, 0, 0])
      },
      timeoutMS
   )
}

testMouseMovement(mod: IWasmModule|IWasmModuleAsync, funcPointer: number) {
   const SIZE = 4*2; //two ints (x, y)
   document.addEventListener("mousemove", async (e) => {
      const listPointer = await mod.malloc(SIZE);
      //insert (x, y) into the allocated list
      mod.wasmMem.mem32.set([e.pageX, e.pageY], listPointer/4);

      await mod.callC(["callbackCaller", funcPointer, listPointer, 2]);
   })
}

The above code makes two example event handlers: timeout and mouse move. The first one just needs to call the function while the second one allocates and fills the parameter list with the x and y positions. Ideally, the malloc, list filling, and call to the callbackCaller function would be handled by a TS function, but I did it manually for this example.

Pros:

• Callback functions no longer need to be given a named export
• Easier to set up for the user since they can just pass the function directly
• Produces easier-to-read code since you can see and jump to the function rather than track an ID

Cons:

• Probably slower due to indirect function calls and list-filling
• Slightly more complex event handler functions since it uses a list instead of flat parameters
• Requires some form of manual memory management in TS to pass the parameter list
  • The example approach I used used malloc which requires an additional WASM call
  • Another approach could be to use some fixed buffer that's just filled though this would be more complicated since it needs to be able to handle being called multiple times before the first one returns
    • As an example: while working on the event library, I've found that postEvent can immediately call the event listeners attached to it. So, an event can be called which calls the callback. From there, the callback could call some JS/TS code to post an event which then calls the callback handler function again without returning first.

[JohnDog3112]

I found another possible method. There is an object called a Webassembly Table that allows for indirect function calls. It's bound similar to imports/exports (where it can either be imported to the WASM module or exported by it) and it allows the passing of certain objects between WASM and JS. For the purposes of callbacks, it allows for anonymous functions to be used.

From what I can find (from the internet and experimentation), there's two relevant flags in wasm-ld for this: --export-table and --import-table. These either export or import a table called __indirect_function_table for the WASM module. Then, any time you pass a function pointer to a JS function it automatically adds it to the table and passes the table index to the JS function. From there, the JS function can simply take a reference to the table and do table.get(function_ptr)(...args) and it will work like a standard exported function.

Pros:

• Function pointers can be passed directly to JS from C (though there is that minor table.get portion).
• Part of the first, but you don't need to export functions you want to use as callbacks and can leave them private.

Cons:

• Functions no longer appear with their names and provide less helpful error messages
• Might require more functions in the case of structs with function pointers. (I'm assuming there would need to be some C function to convert a function pointer into a usable table index for JS when parsing structs)

Example Error Message:

Example Code (doesn't use libraries and initializes WASM module manually):

imports.env["pass_fptr_to_js"] = function(fptr) {
    console.log("table index: " + fptr + ", return value: " + exports.__indirect_function_table.get(fptr)());
};
imports.env["run_operation"] = function(fptr, a, b) {
    console.log("table index: " + fptr + " with " + a + ", " + b + ": " + exports.__indirect_function_table.get(fptr)(a, b));
}

typedef int (*fptr_type)(void);

__attribute__((import_name("pass_fptr_to_js")))
void pass_fptr_to_js(fptr_type fptr);

int ten() {
    return 10;
}

int twelve() {
    return 12;
}

int thirteen() {
    return 13;
}


__attribute__((import_name("run_operation")))
void run_operation(int (*func)(int, int), int a, int b);

int add(int a, int b) {
    return a + b;
}
int sub(int a, int b) {
    return a - b;
}
int divide(int a, int b) {
    return a/b;
}
int multiply(int a, int b) {
    return a*b;
}
int (*funcs[])(int, int) = {
    add, sub, divide, multiply
};

__attribute__((export_name("main")))
int main() {
    pass_fptr_to_js(ten);
    pass_fptr_to_js(twelve);
    pass_fptr_to_js(thirteen);

    for (int i = 0; i < 4; i++) {
        run_operation(funcs[i], 0, 1);
        run_operation(funcs[i], 10, 5);
        run_operation(funcs[i], 6, 3);
        run_operation(funcs[i], 20, 100);
        run_operation(funcs[i], 50, 10);
    }
}

Output:

[JohnDog3112]

Additionally, this index can be passed back to C and it can call it like a normal function pointer. However, if you grab the function from the table and pass that instead, it doesn't work. Though, it sounds like it's possible to do something similar with tables to allow anonymous JS functions to be called from C but I'm not quite sure how it's done.