Avoid spawn_local in favour of async functions #61

New issue

Open

opened 2025-09-13 16:13:41 +00:00 by Ghost · 4 comments

Ghost commented

2025-09-13 16:13:41 +00:00

(Migrated from code.ole.blue)

A lot of early code still contains spawn_local. replace this in favour of async functions

Ghost commented

2025-09-15 22:27:13 +00:00

(Migrated from code.ole.blue)

But you need spawn_local in order to call async functions. Or do you mean wrap them in stuff like Resources?

Either way, I don't see the issue with spawn_local on a button press for example.

But you need `spawn_local` in order to call async functions. Or do you mean wrap them in stuff like `Resources`? Either way, I don't see the issue with `spawn_local` on a button press for example.

Ghost commented

2025-09-16 06:47:01 +00:00

(Migrated from code.ole.blue)

There are Actions for this in leptos - at least as far as I understand Actions

There are Actions for this in leptos - at least as far as I understand [Actions](https://book.leptos.dev/async/13_actions.html)

Ghost commented

2025-09-16 11:45:34 +00:00

(Migrated from code.ole.blue)

Yes, but sometimes they aren't as flexible as just calling the server function directly.

For example:

<ActionForm action=update_action>
    <div class="flex flex-col items-center gap-5">
        <div class="flex flex-col items-center">
            <label class="text-white text-[1.25em]">"Nickname"</label>
            <input
                class="text-[1.25em]"
                type="text"
                value=user.nickname
                name="nickname"
            />
        </div>
        <div class="flex flex-col items-center">
            <label class="text-white text-[1.25em]">"Card number"</label>
            <input
                class="text-[1.25em]"
                type="text"
                value=user.card_number
                name="card_number"
            />
        </div>
        <input type="hidden" value=user.id.0 name="id" />
        <input
            class="text-white hover:bg-pink-700 bg-emerald-700 rounded-full text-[1.25em] p-2"
            type="submit"
            value="Update user"
        />
    </div>
</ActionForm>

We need to set type=hidden on the input for the user id, since the server function needs it, but the user obviously shouldn't supply it's own user id in the Form.

Another example would be change_money_button

{change_money_button(50, args.clone())}
{change_money_button(100, args.clone())}
{change_money_button(200, args.clone())}
{change_money_button(500, args.clone())}
{change_money_button(1000, args.clone())}
{change_money_button(2000, args.clone())}
{change_money_button(5000, args.clone())}

We could change the function call into a component and convert change_money into a ActionForm. But then we need to move the client side logic of creating a Transaction into a new server function that the ActionForm can then call.

I dunno which is better, but I wouldn't blindly go around and change everything into a ActionForm.

Yes, but sometimes they aren't as flexible as just calling the server function directly. For [example](https://github.com/strichliste-rs/strichliste-rs/blob/097cbd32def1bb561f40773706c512508c7a811c/src/routes/user/settings/show.rs#L187): ```rust <ActionForm action=update_action> <div class="flex flex-col items-center gap-5"> <div class="flex flex-col items-center"> <label class="text-white text-[1.25em]">"Nickname"</label> <input class="text-[1.25em]" type="text" value=user.nickname name="nickname" /> </div> <div class="flex flex-col items-center"> <label class="text-white text-[1.25em]">"Card number"</label> <input class="text-[1.25em]" type="text" value=user.card_number name="card_number" /> </div> <input type="hidden" value=user.id.0 name="id" /> <input class="text-white hover:bg-pink-700 bg-emerald-700 rounded-full text-[1.25em] p-2" type="submit" value="Update user" /> </div> </ActionForm> ``` We need to set `type=hidden` on the input for the user id, since the server function needs it, but the user obviously shouldn't supply it's own user id in the Form. Another example would be [change_money_button](https://github.com/strichliste-rs/strichliste-rs/blob/097cbd32def1bb561f40773706c512508c7a811c/src/routes/user/show.rs#L442) ```rust {change_money_button(50, args.clone())} {change_money_button(100, args.clone())} {change_money_button(200, args.clone())} {change_money_button(500, args.clone())} {change_money_button(1000, args.clone())} {change_money_button(2000, args.clone())} {change_money_button(5000, args.clone())} ``` We could change the function call into a component and convert `change_money` into a ActionForm. But then we need to move the client side logic of creating a Transaction into a new server function that the ActionForm can then call. I dunno which is better, but I wouldn't blindly go around and change everything into a ActionForm.

Ghost commented

2025-09-16 14:35:07 +00:00

(Migrated from code.ole.blue)

As for 1: a hidden Input seems the way to go.
As for 2: Imho everything that returns a view should be a component. So yes i would change it to be a component and use just a plain Action

As for 1: a hidden Input seems the way to go. As for 2: Imho everything that returns a view should be a component. So yes i would change it to be a component and use just a plain Action