v0.5.0-alpha

[gbj]

This long-awaited release significantly changes how the reactive system works. This should solve several correctness issues/rough edges that related to the manual use of cx/Scope and could create memory leaks. (See #918 for details)

It also has the fairly large DX change (improvement?) of removing the need to pass cx or Scope variables around at all.

Migration is fairly easy. 95% of apps will migrate completely by making the following string replacements:

1. cx: Scope, => (empty string)
2. cx: Scope => (empty string)
3. cx, => (empty string)
4. (cx) => ()
5. |cx| => ||
6. Scope, => (empty string)
7. Scope => (empty string) as needed
8. You may have some |_, _| that become |_| or |_| that become ||, particularly for the fallback props on <Show/> and <ErrorBoundary/>

Basically, there is no longer a Scope type, and anything that used to take it can simply be deleted.

For the 5%: if you were doing tricky things like storing a Scope somewhere in a struct or variable and then reusing it, you should be able to achieve the same result by storing Owner::current() somewhere and then later using it in with_owner(owner, move || { /* ... */ }).

There are no other big conceptual or API changes in this update: essentially all the same reactive, templating, and component concepts should still apply, just without cx.

Expected to Not Work

leptosfmt and cargo leptos --hot-reload, which assume that the view! needs a cx,, will probably not work as intended and will need to be updated.

Any other ecosystem libraries that depend on Leptos 0.4 won't work, of course.

Help Wanted

This needs pretty extensive testing with real apps. It passes our test suite and the examples seem to work fine, but I'm sure there are bugs out there. Help find them! I've created a discussion linked to these release notes that you can use for feedback or to help track down bugs.

---

This discussion was created from the release v0.5.0-alpha.

[yerlaser]

is it a duplicate of #1437 ?

[gbj]

Thanks, no idea why GitHub made two. I'll close the other one, as clicking "Join the Discussion" from the release notes brings you here.

[rakshith-ravi]

I remember there was some discussion along the lines of not requiring closures to track anymore, and any call to .get() would be automatically tracked. Is that in 0.5? Or am I remembering it wrong?

[gbj]

No, I don't foresee this ever being the case. This is a feature, not a bug.

[taybart]

maybe not super helpful, but I upgraded a small app with no issue! love the new DX!

[francisbr]

Hey I am pretty new to this, but I think I found an issue.

I have a component that renders a form with multiple <input> and <select>. Notably, 1 <select> for countries and 1 <select> for states. I use 2 resources to fetch the options to populate my <select>. The second one, for the states, depends on the one for the countries. Then in my view I have 2 <Suspense>, one for each, to populate the options of my <select>.

Here is a resume of my component
my_component.rs

The issue I am facing is that the country select doesn't get its options populated, no options (other than the hardcoded empty one) get's added to the select. When debugging, I do see the network call beeing done and returning the expected format & everything. I can even log the list I am receiving. And note also, this was working before the upgrade.

I am suspecting a problem with the Suspense component where the context isn't correctly "shared" between the 2 I have?

[francisbr]

Might be related to #1221?

[gbj]

I'm not able to reproduce this with the information you've provided, attempting to expand your example into the below, which seems to work fine. Happy to try to help debug if you can provide a broken version of this!

#[component]
pub fn App() -> impl IntoView {
    let country = create_rw_signal(String::new());
    let state = create_rw_signal(String::new());

    let countries = create_resource(
        || (),
        move |_| async move { vec!["US".to_string(), "UK".into()] },
    );

    let states = create_resource(
        move || country.get(),
        move |selected_country| async move {
            if selected_country == "US" {
                vec!["MA".to_string(), "NY".into()]
            } else {
                vec!["England".into(), "Scotland".into(), "Wales".into()]
            }
        },
    );

    view! {
        <select
            prop:value=move || country.get()
            on:input=move |ev| country.set(event_target_value(&ev))
        >
            <option selected hidden value=""></option>
            <Suspense fallback=move || ()>
                {move || {
                    countries.read().map(|countries| countries.into_iter().map(|country| view! {
                        <option value=country.clone()>{country}</option>
                    }).collect_view())
                }}
            </Suspense>
        </select>

        <select
            prop:value=move || state.get()
            on:input=move |ev| state.set(event_target_value(&ev))
        >
            <option slected hidden value=""></option>
            <Suspense fallback=move || ()>
                {move || {
                    states.read().map(|states| states.into_iter().map(|state| view! {<option value=state.clone()>{state}</option>}).collect_view())
                }}
            </Suspense>
        </select>
    }
}

[francisbr]

After I bit of searching I found how to reproduce. I didn't think much of it so I didn't specify it in my first comment but I am disabling the state select if the length is smaller than 1 so I have this property on my select (outside the suspense).
disabled=move || states.read().map(|states| states.len() < 1).unwrap_or(false)
Starting from your code, simply adding this line cause the country select to not populate correctly somehow.

Full code:

#[component]
pub fn App() -> impl IntoView {
    let country = create_rw_signal(String::new());
    let state = create_rw_signal(String::new());

    let countries = create_resource(
        || (),
        move |_| async move { vec!["US".to_string(), "UK".into()] },
    );

    let states = create_resource(
        move || country.get(),
        move |selected_country| async move {
            if selected_country == "US" {
                vec!["MA".to_string(), "NY".into()]
            } else {
                vec!["England".into(), "Scotland".into(), "Wales".into()]
            }
        },
    );

    view! {
        <select
            prop:value=move || country.get()
            on:input=move |ev| country.set(event_target_value(&ev))
        >
            <option selected hidden value=""></option>
            <Suspense fallback=move || ()>
                {move || {
                    countries.read().map(|countries| countries.into_iter().map(|country| view! {
                        <option value=country.clone()>{country}</option>
                    }).collect_view())
                }}
            </Suspense>
        </select>

        <select
            disabled=move || states.read().map(|states| states.len() < 1).unwrap_or(false)
            prop:value=move || state.get()
            on:input=move |ev| state.set(event_target_value(&ev))
        >
            <option slected hidden value=""></option>
            <Suspense fallback=move || ()>
                {move || {
                    states.read().map(|states| states.into_iter().map(|state| view! {<option value=state.clone()>{state}</option>}).collect_view())
                }}
            </Suspense>
        </select>
    }
}

Maybe this is not how it should be done?

[martinfrances107]

Just a field report, in response to the "Help Wanted" section

I bumped a app from 0.3 to 0.5.0-alpha everything went well
but maybe that is as expected as I am not doing anything unconventional, no special mount etc

Here is the relevant leptos entries in my manifest , so if there any show stoppers in other sub-crates .. then I would not have seen them

leptos = { version = "0.5.0-alpha", default-features = false, features = ["serde"] }
leptos_meta = { version = "0.5.0-alpha", default-features = false }
leptos_router = { version = "0.5.0-alpha", default-features = false }

So everything is positive from me...

Only a minor feedback from the wording in the release note

specifically around the phrase "empty string" in the examples -- it is difficult to convey that the use should leave a blank space in a certain position

cx: Scope, => (empty string)

I have to say I found the "empty string" thing a little difficult to digest

If you are publishing a migration guide, can I suggest a more explicit example - nothing more than

this

         <Route path="" view=  move |cx| view! { cx, <Home/> }/>

becomes

         <Route path="" view=  move || view! {  <Home/> }/>

as a "example" saves a thousand words.

[rakshith-ravi]

Fair, but wouldn't a migration guide be easier? A simple "find and replace X to Y" would be easier for people to understand, wouldn't it? (And that is what is currently given)

In the given example, Y is just an empty string. That would be an easier migration guide wouldn't you say?

[martinfrances107]

Ah everyone one absorbs information differently

[luckynumberke7in]

When building with Actix using Leptos 0.5.0-alpha2, you must also change your cargo.toml dependency to leptos_actix = { version = "0.5.0-alpha2", optional = true } (on top of the 3 previously mentioned).

[luckynumberke7in]

This finally got my new cargo-leptos project with Actix, tailwindcss, daisyui to work with 0.5.0-alpha2!