Yew.rs tutorial has outdated wasm-bindgen-futures pattern

[Madoshakalaka]

This is about:

• A typo
• Inaccurate/misleading documentation (e.g. technically incorrect advice)
• Undocumented code
• Outdated documentation
• Other

Problem

This is an excerpt from the tutorial, after tellinng new users to add wasm-bindgen-futures into the Cargo.toml, the problem is it should instead use yew_platform::spawn_local and use_future:

#[component]
fn App() -> Html {
    let videos = use_state(|| vec![]);
    {
        let videos = videos.clone();
        use_effect_with((), move |_| {
            let videos = videos.clone();
            wasm_bindgen_futures::spawn_local(async move {
                let fetched_videos: Vec<Video> = Request::get("https://yew.rs/tutorial/data.json")
                    .send()
                    .await
                    .unwrap()
                    .json()
                    .await
                    .unwrap();
                videos.set(fetched_videos);
            });
            || ()
        });
    }

    // ...

    html! {
        <>
            <h1>{ "RustConf Explorer" }</h1>
            <div>
                <h3>{ "Videos to watch" }</h3>
                <VideosList videos={(*videos).clone()} on_click={on_video_select} />
            </div>
            // ...
        </>
    }
}

Details about the solution you'd like (Optional)

Use up to date Yew API

Questionaire (Optional)

• I'd like to write this documentation
• I'd like to write this documentation but I'm not sure what's needed
• I don't have time to add this right now, but maybe later

[shan-shaji]

Hey @Madoshakalaka , Can i grab this one?

[Madoshakalaka]

Hey @Madoshakalaka , Can i grab this one?

Go ahead, thanks!

Also note our tutorial is versioned and translated to 3 other languages. If you are a perfectionist, you should change for all versions of Yew that had the new yew_platform and use_future API (customization might even be needed for each version depending on what's available)

For translation, feel free to rely on AI tooling. I can try to review simplified Chinese parts.

[Madoshakalaka]

Fortunately, the Yew API used in the tutorial has not diverged at all across Next, 0.23, and 0.22. So the same tutorial for those three versions will suffice (except for the yew version in the first Cargo.toml codeblock)

[shan-shaji]

noted. Thanks @Madoshakalaka

[shan-shaji]

Hey @Madoshakalaka,

I've updated the tutorial code to use use_future and Suspense component instead of the use_state and spawn_local combo. I was able to get the desired output, but I noticed you mentioned using both yew_platform::spawn_local and use_future in the issue. Does that mean I should include examples of fetching the data in two different ways? Please correct me if i have missed anything.

gist:

// --snip--
#[component]
fn VideosFetcher(
    VideosFetchProps {
        on_click,
        selected_video,
    }: &VideosFetchProps,
) -> HtmlResult {
    let videos = use_future(|| async {
        TimeoutFuture::new(3_000).await;
        Request::get("/tutorial/data.json")
            .send()
            .await
            .unwrap()
            .json::<Vec<Video>>()
            .await
    })?;

    match &*videos {
        Ok(videos) => Ok(html! {
            <>
                <div>
                    <h3>{ "Videos to watch" }</h3>
                    <VideosList videos={videos.clone()} on_click={on_click.clone()} />
                </div>
                if let Some(video) = selected_video {
                    <VideoDetails video={video.clone()} />
                }
            </>
        }),
        Err(err) => Ok(html! {
            <p>{format!("Error fetching videos: {err}")}</p>
        }),
    }
}

#[component]
fn App() -> Html {
    let selected_video = use_state(|| None);
    let on_video_select = {
        let selected_video = selected_video.clone();
        Callback::from(move |video: Video| {
            selected_video.set(Some(video));
        })
    };

    html! {
    <>
        <h1>{ "RustConf Explorer" }</h1>
                <Suspense fallback={html! { <p>{ "Loading..." }</p> }}>
                    <VideosFetcher
                        on_click={on_video_select}
                        selected_video={(*selected_video).clone()}
                    />
                </Suspense>
    </>
    }
}

// --snip--

[Madoshakalaka]

@shan-shaji Thanks, looking good. Sorry for being ambiguous. Indeed we could include both ways. We have <Tab/> components for code comparison too.

However, we merge and test the code snippets on the tutorial page. And the testing tool isn't smart enough to handle multiple branches at this moment.

use_future is the better way here. yew_platform::spawn_local is a useful fallback when hooks are not available, for example in struct components or functions.

[shan-shaji]

However, we merge and test the code snippets on the tutorial page. And the testing tool isn't smart enough to handle multiple branches at this moment.

Thanks @Madoshakalaka for clearing my doubt. Then for now i will update the pages using the use_future hook. Can you also point me to the test files :), just to get an understanding. Is it this one? Thanks again!

[Madoshakalaka]

@shan-shaji
Yes it's that one. you can refer to .github/workflows/test-website.yml to learn how to run it.
Or you can open a draft PR and let our CI run it.

[shan-shaji]

Got it thank you so much