Providing a closure as member of a parameter object to pass to an JS function

[emirror-de]

Summary

Dear Community,
I want to create bindings for the Modal module of fomantic-ui.

The following example is shown for a confirm modal in the documentation:

// title and handler
$.modal(
    'confirm',
    {
        title: 'Ready?',
        handler: function(choice) {
            $.toast({
                message: 'You ' + (choice ? 'Accepted':'Declined')
            });
        }
    }
);

The configuration object contains a handler callback.

How is it possible to create a binding for this? As far as I know, there is no method using serde for this because a closure is required.

I tried:

/// [Modal] configuration options.
#[wasm_bindgen]
pub struct ModalConfig {
    /// Title of the modal.
    title: String,
    /// Handler.
    handler: Closure<dyn Fn(bool)>,
}

impl ModalConfig {
    /// New modal configuration.
    pub fn new<H: Fn(bool) + 'static>(title: &str, handler: H) -> Self {
        let handler = Closure::new(handler);
        Self {
            title: title.to_string(),
	    handler
        }
    }
}

#[wasm_bindgen]
extern "C" {
    /// A modal.
    pub type Modal;
    
    /// Internal function to create the modal on JavaScript side.
    #[wasm_bindgen(js_namespace=["$"], js_name="modal")]
    fn new_modal_with_config(props: &str, config: ModalConfig) -> Modal;
}

impl Modal {
    /// A new modal with given configuration.
    pub fn new_with_config(config: ModalConfig) -> Self {
        new_modal_with_config("confirm", config)
    }
}

In my leptos component, I am using:

let config = ModalConfig::new(
	"hello",
        move |b| {
            log::debug!("HI {b}");
        }
);
let modal = Modal::new_with_config(config);

The code compiles, the modal opens, but there is neither a title, nor does the callback fire when I hit the "OK" button.

Can someone help me to make this work? What I am doing wrong?

Thanks in advance, best regards,
Lewin

[63b8e7lmk1jv9c0ovus4hqkcasqgp0ed]

#[wasm_bindgen]
pub struct ModalConfig {
    /// Title of the modal.
    title: String,
    /// Handler.
    handler: Closure<dyn Fn(bool)>,
}

The fields are not accesible from JS. These need to be public, but dyn Fn(bool) is also not supported by bindings. The documentation does provide ways to write this though. In the future, you can also check the console for JS to see panic messages if you have an error hook set.

[emirror-de]

Thanks for your answer, I did not find anything in the documentation about this case as well. I am using console_error_panic_hook::set_once(); but there is no error message when calling the modal, it just shows up with empty content.

So if I get you right, there is currently no straight forward solution for this?

My alternative idea would be to write an adapter script on the JavaScript side and write bindings for that, eg.:

function create_confirm_with_handler(config, handler) {
   config.handler = handler;
    $.modal('confirm', config);
}

But I think there needs to be a better way to do this 🤔

[63b8e7lmk1jv9c0ovus4hqkcasqgp0ed]

The issue is that the fields are private. I was wrong about the hook, the library calling the closure could be catching errors, or it could be reported to another window in the console. It would probably be easier to first test the bindings independently of the library.

[emirror-de]

Sadly when I switch visibility to pub I do get the following compiler error:

error[E0277]: the trait bound `wasm_bindgen::prelude::Closure<(dyn Fn(bool) + 'static)>: IntoWasmAbi` is not satisfied
  --> src/modules/modal.rs:35:1
   |
35 | #[wasm_bindgen]
   | ^^^^^^^^^^^^^^^ the trait `IntoWasmAbi` is not implemented for `wasm_bindgen::prelude::Closure<(dyn Fn(bool) + 'static)>`
   |
   = help: the trait `IntoWasmAbi` is implemented for `&'a wasm_bindgen::prelude::Closure<T>`
   = note: this error originates in the attribute macro `wasm_bindgen` (in Nightly builds, run with -Z macro-backtrace for more info)

It says that IntoWasmAbi is implemented for &'a Closure<T>. When changing it to &'a Closure<T>, the compiler tells wasm_bindgen does currently not allow lifetime specifier.

I am not familiar with binding tests yet, do you have recommendations of resources for it?

[63b8e7lmk1jv9c0ovus4hqkcasqgp0ed]

I think something like the following will probably work

/// [Modal] configuration options.
#[wasm_bindgen]
pub struct ModalConfig {
    /// Title of the modal.
    pub title: String,
    handler: Closure<dyn Fn(bool) -> JsValue>,
}

impl ModalConfig {
    /// New modal configuration.
    pub fn new<H: Fn(bool) + 'static>(title: &str, handler: H) -> Self {
        let handler = Closure::new(handler);
        Self {
            title: title.to_string(),
	    handler
        }
    }
}

#[wasm_bindgen]
extern "C" {
    /// A modal.
    pub type Modal;
    
    /// Internal function to create the modal on JavaScript side.
    #[wasm_bindgen(js_namespace=["$"], js_name="modal")]
    fn new_modal_with_config(props: &str, config: ModalConfig) -> Modal;
}

#[wasm_bindgen]
impl ModalConfig {
    #[wasm_bindgen]
    pub fn handler(&self, v: bool) -> JsValue {
         self.handler(v)
    }
}

My alternative idea would be to write an adapter script on the JavaScript side and write bindings for that, eg.:

If you find stuff becoming too complex, I don't necessarily think this is a bad idea. There's also the option to use bindings that set a closure on a JsValue. This would be something like the following

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(method, setter)]
    fn handler(this: &Modal, f: &mut dyn FnMut());
}

I am not familiar with binding tests yet, do you have recommendations of resources for it?

I just meant that you should create bindings, then use those bindings from the console of the browser to test if they work. Attempting to test on bindings for an external JS dependency seems too complicated.

[emirror-de]

Awesome, using a setter method was the thing worked for me. I am now creating an alias for a plain JS Object using:

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_name = Object)]
    pub type ModalConfig;
    #[wasm_bindgen(constructor, js_class = Object)]
    pub fn new() -> ModalConfig;
    #[wasm_bindgen(method, setter)]
    pub fn handler(this: &ModalConfig, f: &mut dyn FnMut());
}

This object is then passed to the constructor binding of the modal.

Thanks for your help, much appreciate it!