Use view macro for composing components with htmx

[ejazahm3d]

Hi.
I was looking for a way to use leptos only on server by composing components and then rendering them to HTML.
I tried using render_to_string, but when I try to compose components, it just crashes.
Here is some example code.

#[component]
fn ByeWorld(text: u8) -> impl IntoView {
    view! { <div>"Bye " {text}</div> }
}

async fn greet() -> impl IntoResponse {
    let view = view! {
        // <ByeWorld  text=8 />
        <div>"Hello World"</div>
    };
    let res = render_to_string(move || view);
    // HomeTemplate {
    //     name: String::from("WORLD"),
    // }
    Html(res.into_owned())
}

I am returning greet in axum route.
I am using 0.5.0-rc2

Thanks.

[gbj]

render_to_string() creates the necessary reactive runtime for the life of the function you pass to it. I suspect you'll find that while this panics:

let view = view! {
        <ByeWorld  text=8 />
        <div>"Hello World"</div>
    };
    render_to_string(move || view)

this works fine:

render_to_string(move || {
        view! {
            <ByeWorld  text=8 />
            <div>"Hello World"</div>
        }
    })

or of course this:

let view = move || {
        view! {
            <ByeWorld  text=8 />
            <div>"Hello World"</div>
        }
    };
    render_to_string(view).to_string()

[ejazahm3d]

render_to_string() creates the necessary reactive runtime for the life of the function you pass to it. I suspect you'll find that while this panics:

let view = view! {
        <ByeWorld  text=8 />
        <div>"Hello World"</div>
    };
    render_to_string(move || view)

this works fine:

render_to_string(move || {
        view! {
            <ByeWorld  text=8 />
            <div>"Hello World"</div>
        }
    })

or of course this:

let view = move || {
        view! {
            <ByeWorld  text=8 />
            <div>"Hello World"</div>
        }
    };
    render_to_string(view).to_string()

Hi. Thanks a lot. I appreciate it.
You are right. But when I run it like that, it gives me this weird output and not what I expect (I expect plain HTML output).

<!--hk=0-0-5c|leptos-unit-end-->

[gbj]

Right; it's a frontend framework that generates HTML to be hydrated in the browser, not a generic Rust HTML templating library so it inserts some extra marker nodes that it uses for hydration. Note that this is debug mode. Release mode still includes some, but fewer and less verbose, markers.

If you activate the experimental-islands feature on 0.5.0-rc2 or git main, you'll probably be happier with the output, which should be plain HTML for your purposes.

[gbj]

(Note, of course, that what it outputs in the case you show is also plain HTML: it's just an HTML comment.)

[ejazahm3d]

@gbj Thanks. But for some reasons it gives me empty string.
https://codesandbox.io/p/sandbox/strange-currying-nm49xp?file=/src/main.rs:8,35
I have attached a codesandbox with minimal reproduction.
Please correct me if I am trying to do something that I shouldn't.
Basically I am trying to use leptos for defining server only components without reactivity or interactivity.
Composing components and send them as html to frontend.

[gbj]

If you compare your version to my version above, you'll see that you have a stray semicolon:

let res = render_to_string(move || {
    view! {
        <ByeWorld  text=8 />
        <div>"Hello World"</div>
    }; // HERE
});

This means that what is returned from the closure inside render_to_string is not your view, but the unit type (), which is (helpfully? unhelpfully?) rendered as an empty HTML string. (It's important that () implements IntoView for Reasons, but occasionally causes this footgun.)

if you remove that semicolon it should work as you intended.

[ejazahm3d]

Thanks a lot! That fixed it!