Integrate existing Web Component library with leptos

[showbiz2k]

I'm trying to integrate with an existing web component library, specifically https://github.com/microsoft/fluentui/tree/master/packages/web-components. I've seen examples of building a web component in rust but not consuming/integrating with existing web components. What I've got so far "works", but I'd like a better integration with leptos. I'd like to be able to use something like NodeRef::<MyWebComponent>::new() and have access to methods defined in my web component, just like a NodeRef::<Input> has access to focus, blur, etc. but can't seem to bindgen something that is compatible with NodeRef. I have been able to bindgen to a js snippet and interact with elements in a rudimentary way. Below is what i've got so far.

Import Web Component library into project

I've added the npm package @fluentui/web-components@beta (and @microsoft/fast-element in order to build for some reason) to my workspace. I added a fluent-ui-component.js file to my root and am using webpack to manually build a js bundle into the target/site output folder (this gets removed when I do a build right now, but doing the js build manually for testing) and I add a reference to the bundled js file in my shell.

import { setTheme } from '@fluentui/web-components';
import { webLightTheme } from '@fluentui/tokens';

import '@fluentui/web-components/button.js';
import '@fluentui/web-components/link.js';
import '@fluentui/web-components/text-input.js';
import '@fluentui/web-components/dialog.js';
import '@fluentui/web-components/dialog-body.js';
import '@fluentui/web-components/text.js';
import '@fluentui/web-components/checkbox.js';
import '@fluentui/web-components/field.js';
import '@fluentui/web-components/message-bar.js';
setTheme(webLightTheme);

This lets me use the web components in my leptos components, bind signals to attributes, add event handlers etc. all good stuff.

Integrate with Dialog component

the fluent-dialog component exposes hide and show methods. I've created a fluent-ui-helper.js in the root of my app folder that interacts with the dom to hide/show the dialog.

export function toggle(dialogId) {
  var dialogElement = document.getElementById(dialogId);

  if (dialogElement.dialog.open) {
    dialogElement.hide();
  }
  else {
    dialogElement.show();
  }
}

I then use the bindgen to import as a JsSnippet and interface with that in my component.

#[wasm_bindgen(module = "/fluent-ui-helper.js")]
extern "C" {
    fn toggle(dialogId: &str);
}

#[component]
pub fn Users() -> impl IntoView {
    let (test, set_test) = signal(String::new());
    let add_user = ServerMultiAction::<CreateUser>::new();
    let on_click = move |_| toggle("my-dialog");
    let dialog_ref = NodeRef::<Custom<&str>>::new();

    view! {
        <h1>"Dialog test"</h1>
        <fluent-text-input name="test" bind:value=(test, set_test) placeholder="Enter a value" />
        <div>{test}</div>
        <fluent-button on:click=on_click>"Open dialog"</fluent-button>
        <fluent-dialog id="my-dialog" node_ref=dialog_ref style="visibility:visible">
            <fluent-dialog-body>
                <fluent-text slot="title">"Dialog"</fluent-text>
                <fluent-button slot="title-action" on:click=on_click>"X"</fluent-button>
                <MultiActionForm action=add_user>
                    <fluent-text-input appearance="primary" name="display_name">"Username"</fluent-text-input>
                    <fluent-button appearance="primary" type="submit" >"Add"</fluent-button>
                </MultiActionForm>
                <fluent-button slot="action">"Do stuff"</fluent-button>
            </fluent-dialog-body>
        </fluent-dialog>
    }
}

Doesn't feel great, but it works.

Attempt to bindgen component

I (feebly) tried to bindgen an interface for the dialog component...not sure if i'm in the right direction here or not

#[wasm_bindgen(module = "@fluentui/web-components/dialog.js")]
extern "C" {
    #[wasm_bindgen(js_name = Dialog, extends = HtmlElement , extends = Element , extends = Node , extends = EventTarget )]
    type Dialog;
}

This compiles, but I don't see any evidence of it in the bindgen js generated. When I try to use the Dialog type in a NodeRef::<Dialog>::new() I get an error "the trait bound user::Dialog: ElementType is not satisfied". (I haven't added any methods to the bindgen thinking I need to get the Dialog type properly generated first).

I'm not sure if I'm on the right track with this bindgen or not. Has anyone tried to integrate with a Web Component library? Any ideas on what I might try next to better integrate with leptos?

Thanks,
Matthew

[gbj]

It seems to me that the only question here that's not currently covered is how to call the show and hide methods — Is that right?

When I need to do things like this, I'll typically just use js_sys::Reflect::get() to get the function and to call it, but using wasm-bindgen to do the bindings properly is reasonable, I guess, if you want a better API.

What you're going to generate bindings to would be like a FluentDialogElement similar to all the element types like web_sys::HtmlDialogElement and so on.

You'd then define a separate struct FluentDialog that you'd implement ElementType on if you want to use it directly in a NodeRef without using Custom<_>. (ElementType is not a particularly complex trait ElementType::Output would be your FluentDialogElement that you've generated bindings to.)

However just using Custom<_> and then using wasm_bindgen::JsCast to cast to your FluentDialogElement is also a fine approach.

[showbiz2k]

Following the js_sys::Reflect::get() advice I came up with the following:

#[component]
pub fn Users() -> impl IntoView {
    let dialog_ref = NodeRef::<Custom<_>>::new();
    let show_dialog = move |_| {
        let dialog = dialog_ref.get().unwrap();
        let show_jsval = js_sys::Reflect::get(&dialog, &JsValue::from_str("show")).unwrap();
        let show_fun = show_jsval.dyn_into::<js_sys::Function>().unwrap();
        let params = js_sys::Array::new();
        let _ = js_sys::Reflect::apply(&show_fun, &dialog, &params);
    };

    let hide_dialog = move |_| {
        let dialog = dialog_ref.get().unwrap();
        let hide_jsval = js_sys::Reflect::get(&dialog, &JsValue::from_str("hide")).unwrap();
        let hide_fun = hide_jsval.dyn_into::<js_sys::Function>().unwrap();
        let params = js_sys::Array::new();
        let _ = js_sys::Reflect::apply(&hide_fun, &dialog, &params);
    };
   

    view! {
        <h1>"Dialog test"</h1>
        <fluent-button on:click=show_dialog>"Open dialog"</fluent-button>
        <fluent-dialog id="my-dialog" node_ref=dialog_ref style="visibility:visible">
            <fluent-dialog-body>
                <fluent-text slot="title">"Dialog"</fluent-text>
                <fluent-button slot="title-action" on:click=hide_dialog>"X"</fluent-button>
                "Dialog Content"
                <fluent-button slot="action">"Do stuff"</fluent-button>
            </fluent-dialog-body>
        </fluent-dialog>
    }
}

Is that what you would expect it to look like? This lets me interact with the web component just fine. I'll explore the wasm-bindgen route further as I think it would give a more natural interface just treating the element like any other html element. I read through the (detailed) axum_js_ssr example illustrating the complications of integrating with a js library. I feel like integrating with a web component wouldn't have the same complications as they are encapsulated, shouldn't mess with the dom in ways leptos wouldn't expect, and generally work like any other element. Would you agree with that?

Thanks for the help! I appreciate it.

[gbj]

Yeah looks basically reasonable to me, and if it works it works! I'd say: using wasm-bindgen will provide you a nicer Rust API, of course, in exchange for requiring a little more knowledge of how wasm-bindgen works and how to create bindings with it nicely; js_sys::Reflect gives you all the pros and cons of manipulating JS directly (quick, easy, dirty, duck typed for better or worse)