Persistent State using islands-router

[CodingFlow]

I'm trying out islands-router on my SSR + islands app and running into a few issues. The main issue is that context basically does not work: if there are any server components between context provider and user, it does not work (which is the main use-case). So I tried storing signals in a OnceLock, but found that the state from the signals are not rendered when switching pages, even if there is an Effect to update a derived signal (using closure) that reads signals from the OnceLock.

I need a secure enough client-side storage that persists between pages, such as in-memory, for authentication tokens and other less sensitive data. Any ideas on how to achieve this with islands-router or does the islands-router feature need more time to stabilize?

Secondary related issue: clicking links that go to the same page (hashtag <--> same page without hashtag) resets displayed signal values to default, even if signals are stored in a OnceLock, and Effects are not re-run to allow trying to update the values.

Thank you in advance for any help! 🙇

[gbj]

For Part 1 -- could you provide some example code? It's hard to understand what you mean. Where are you storing signals in a OnceLock? Where are you using them? Which examples of context don't work? etc.

For Part 2 -- I agree that navigating from /some_page#foo to /some_page should probably not fetch the new page from the server. I don't think it currently checks that; the place to look would be clickToReq, which should return undefined if we should ignore the islands router and do whatever the default link click behavior would be for that link. PR welcome.

[CodingFlow]

Hi @gbj,

To clarify:

In a Leptos SSR app, provide_context can be used in an island near the top of the component graph to share signals between islands on the page. This state island can be a donut that lets server-rendered children through without increasing wasm binary size. So SSR is working well.

With island-router, provide_context does not work through server-rendered components, so it can't be used to share signals between islands on the page. So I need an alternative in-memory for sharing signals across islands on a page.

But also, I'm interested in using island-router to enable sharing signals/state across pages. Since it does not cause a full page reload when navigating between pages, state can be stored in-memory like in server/desktop apps. And state can be persisted as needed to local storage, cookie, or server.

Example

I finally took some time to work on a minimal example and ended up finding a working solution for global, persistent state on client-side using a OnceLock

Here's the repo: https://github.com/CodingFlow/leptos-islands-routing-test/tree/main

• State persistence on page navigation:
  • Issue:
    When navigation to a page, either by clicking a link or using browser back/forward history button, server-side initial values are displayed instead of value from global state stored in memory via OnceLock.
  • Solution:
    The less than ideal solution is to use a LocalResource. This may only be an issue for derived signals (closures that call signals), but can't be sure yet since I haven't tested with signals directly.

Home page (/)

• Checkbox one adds 1 to the sum.
• Checkbox two adds 2 to the sum.
• Sum is using my solution to show persistent client-side state instead of server state on page navigation.

Other page (/other)

• not using my solution. As you can see, persistent values for first number are not reflected on page load.
• Click the button at the bottom, values from persistent client-side state are correctly set on local signals.

I still have one issue I don't have a good solution for:

Is there a solution for shared state between islands on the same page, but does not carry over to other pages?

[gbj]

Is there a solution for shared state between islands on the same page, but does not carry over to other pages?

The typical way you'd do this is via context. You can create an island context provider that provides the signal via context to its children. This scopes it to that particular page.

[CodingFlow]

@gbj But with island-routing enabled, context doesn't work if there are server components between the island context provider and the islands using the context.

[gbj]

Context does work between islands, not sure what you mean. I just added it to your demo and it's fine.

#[component]
fn HomePage() -> impl IntoView {
    view! {
        <h1 class="p-6">"Homepage"</h1>
        <div class="p-6">
            <a href="/other" class="p-6">go to other page</a>
            <ProvideSignal>
                <ServerThing>
                    <ChangeValueOne />
                    <ChangeValueTwo />
                    <Sum />
                </ServerThing>
            </ProvideSignal>
        </div>
    }
}

#[island]
fn ProvideSignal(children: Children) -> impl IntoView {
    provide_context(42i32);
    children()
}

#[component]
fn ServerThing(children: Children) -> impl IntoView {
    children()
}

#[island]
fn Sum() -> impl IntoView {
    let val = expect_context::<i32>();

// ...

[CodingFlow]

You're right, I enabled islands-router in my ssr project and it's working as well. I suspect it was user error on my part on configuring islands-router and breaking context by wrapping <Router> component in an island or placing an island as a direct child of the <Router>.