use_local_storage does not work in my project

[flupke]

In a pet project to learn Leptos, I tried use_local_storage to persist a value, but it does not work. I can see in the console that the event handler is executed, but nothing appears in the local storage:

#[component]
fn HomePage() -> impl IntoView {
    let score = create_resource(|| (), |_| async move { get_score().await });
    let instructions = create_resource(|| (), |_| async move { random_instructions() });
    let win_action = create_action(move |_: &()| async move {
        score.set(register_win().await);
        instructions.set(random_instructions());
    });
    let submitting_win = win_action.pending();
    let (instructions_count, set_instructions_count, _) =
        use_local_storage::<i32, JsonCodec>("instructions-count");

    if instructions_count.get_untracked() == 0 {
        set_instructions_count(1);
    }

    view! {
        <h1>Moderato</h1>
        <Suspense fallback=move || view! { <p>Chargement...</p> }>
            <h2>Score: {score}</h2>
            <div>
                Nombre dinstructions
                <input
                    type="number"
                    min=1
                    max=4
                    value=instructions_count
                    on:change=move |e| {
                        let value = event_target_value(&e).parse().unwrap_or(1);
                        console_log(&format!("event_target_value(&e): {:?}", value));
                        set_instructions_count(value);
                    }
                />

            </div>
            <div>
                <p>{instructions}</p>
            </div>
            <div>
                <button
                    on:click=move |_| instructions.set(random_instructions())
                    disabled=submitting_win
                >
                    Réessayer
                </button>
                <button on:click=move |_| win_action.dispatch(()) disabled=submitting_win>
                    Gagné
                </button>
            </div>
        </Suspense>
    }
}

The code is available here, in branch add-instructions-count: https://github.com/flupke/moderato/tree/add-instructions-count

[maccesch]

For a simple i32 I'd recomment the FromToStringCodec. Other than that it should work. Does the demo in the book work for you?

[flupke]

Yes the demo works

[flupke]

Note my project uses SSR, and the demo does not

[maccesch]

I suspect you added the feature ssr permanently. Please read the SSR section of the book carefully to check.

[flupke]

Yes I had ssr enabled for leptos-use ; I tried removing it and now use_local_storage works as expected.

I thought I followed the recommendations of the docs though :)

When using together with server-side rendering (SSR) you have to enable the feature ssr similar to how you do it for leptos.

[maccesch]

well the key is in "similar to leptos". How do you enable it in leptos? I guess you need to read the aforementioned chapter of the book again 😄

[flupke]

I don't know how it is enabled in Leptos actually, I just used the SSR template :)

Note all this is very new to me, I started this pet project to learn Leptos. Unless I missed something they don't go into details about how SSR works and just point to their template, which is how I started the project. Then I added leptos-use, saw there was a SSR feature, so I figured out I had to enable it for this SSR project :shrug:

I'm sorry if I did not read the documentation properly, but honestly after reading it again I still don't know which piece you're referring to :)

[maccesch]

[flupke]

Thank you, I think I understand now. Does it mean leptos-use's ssr feature has to be enabled only when my app is built with the ssr feature? Maybe because it's built once for the server with ssr on, and another time for the client's wasm with ssr off?

If that's correct then my error was enabling ssr for both builds by putting it here:

leptos-use = { version = "0.10.2", features = ["serde_json", "serde", "ssr"] }

If so maybe I could do a little PR to add this explanation to the docs? WDYT?

(I understand all of this may seem obvious for a seasoned user, but I just picked up Rust a few weeks ago, and discovered how [features] work through this discussion :) )

[maccesch]

that's exactly right. That's also how you have to do it for Leptos. Yes a PR would be welcome. Thanks!