Svelte to Leptos Migration: How to Handle

[Tb1281]

I’m attempting to migrate from Svelte to Leptos, but I’m uncertain about the best practices.

For example, my current Svelte code looks like this:

import type { PageLoad } from './$types';
import { invoke } from '@tauri-apps/api/core';

export const load: PageLoad = async ({ params }) => {
    const foo = params.foo;
    try {
        const bar = await invoke<string>('...', { foo });
        return { bar };
    } catch {
        throw goto("/", { replaceState: true });
    }
};

In Tauri with Leptos, 'invoke' is wasm_bindgen fn:

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
    async fn invoke(cmd: &str, args: JsValue) -> JsValue;
}

The official documentation suggests using Resource, but I’m unsure how to handle navigation on failure.

• How can I redirect the user (e.g., to /) when invoke fails?
• Should I use memo, effect, or another method to manage the state properly in this case?

Any guidance or example code would be greatly appreciated! Thank you!

[gbj]

I have never used Tauri so I'm probably the wrong person to answer. But I'll try.

attempting to migrate from Svelte to Tauri

Do you mean Svelte to Leptos?

In Tauri with Leptos, 'invoke' is wasm_bindgen fn:

Just to be clear there's no Leptos functionality in this snippet, it's just wasm-bindgen.

Here's how you might do something like this:

let navigate = use_navigate();
let params = use_params_map();
let data = LocalResource::new(move || {
    let foo = params.read().get("foo");
    async move {
        match foo {
            Some(value) => {
                let result = invoke(/* ... */).await;
                if result.is_an_error() {
                    navigate("/", Default::default());
                } else {
                    result
                }
            }
            None => todo!(), /* something else if there's no param */
        }
    }
});

I assume you jsut need some additional wasm-bindgen encoding/decoding to get a useful type from JsValue. But, like I said... I haven't used Tauri so am not sure the best pattern for that.

[Tb1281]

Thank you for replying! :) As you mentioned, I changed Tauri -> Leptos.

The 'invoke' fn is thread-unsafe future, so I can't use it directly in "resource"...
I was long. It works very fine! have a nice day!