Embedding Leptos component islands into existing axum site

[haruska]

I have a site that is built with axum using tera templates for html pages. There is a page I'd like to add an island of interactivity to using Leptos. I'm unsure if this is possible?

I was thinking of generating an axum router for all pages that have leptos functionality on them and merging that with the current axum router. Ideally, those Leptos component pages could somehow reuse the tera base templates and attach the Leptos island to a DOM node with a certain id. Tera can render templates to a Rust string but I'm unsure how I would use that resulting HTML in a Leptos view.

I admit I'm a bit out of my depth here. Is this approach possible?

[gbj]

Yes, it is definitely possible. How easy or complex it is will depend, as is often the case, on what exactly you want to do!

Here would be one simple way to do it. (This would not server-render the Leptos content, although you could still do that.) This approach does not exactly use "islands" in the sense of the Leptos islands feature so I'm going to call each small zone of interactivity mounted to a DOM element a "widget" instead.

1. Create a Leptos project.
2. For each "widget," create two things
   i. A component that does everything you want
   ii. A function, annotated with #[wasm_bindgen] to mount the component to a particular <div>.

This will look something like this:

#[component]
pub fn WidgetA() -> impl IntoView {
  // ...
}
 
#[wasm_bindgen]
pub fn mount_widget_a(el: web_sys::HtmlElement) {
  let unmount_on_drop = leptos::mount::mount_to(el, WidgetA);
  unmount_on_drop.forget(); // or create some way of cleaning them up when you'd like to
}

3. Use Tera to render a placeholder <div id="widget-a"></div> somewhere.
4. Compile your Leptos app to WASM
5. Import the WASM module and call the appropriate mount_widget_ function for each of the widgets you want to render

Note that this includes a bunch more ceremony/boilerplate than it would be if you started with a greenfield Leptos project (where much of the above is managed by the build tooling and framework), but it allows you to plug into an existing application.

---

There are several other ways to do what you're describing, this is just one approach; feel free to ask questions etc.

[ghost]

This may be another way of doing it, or maybe I'm just creating a mountain of technical debt, but I have been calling my hydrate function as such:

#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {

    console_error_panic_hook::set_once();
    hydrate_news_toggles();
    mount_news_component();
    // other post ssr "plugins"

}

pub fn mount_news_component() {
    use leptos::prelude::*;
    use crate::islands::news::*;
    let selector = r#"[data-component="news"]"#;
    if let Ok(Some(element)) = document().query_selector(selector) {
        let mount = element.parent_element()
        .expect("news section does not have a parent element").unchecked_into::<HtmlElement>();
        mount::hydrate_from(mount, || view! { <NewsComponent />}).forget();
    }
}

// and so on

It seems to work well, but there could be tradeoffs. This is for an axum/tera project.