From 0.18.0 to 0.19.0

Yew 0.19.0 has changed a lot, thus this migration will not cover ALL of the changes.

Instead only the most impacting changes are mentioned and the rest should be picked up by cargo.

html! requirement for braces around most props

Put it simply almost all the time you have to provide braces for props:

• Invalid
• Valid
• Shorthand

let super_age = 1;
html!{
    <JapaneseYew
        age=super_age // ! Will throw an error
    >
}

let super_age = 1;
html!{
    <JapaneseYew
        age={super_age} // Correct
    >
}

Also now you can use a shorthand if prop and variable names are the same:

let age = 1;
html!{
    <JapaneseYew
        {age}
    >
}

There is a community provided regex to help with this change, though we cant promise it will work all the time.

It for sure breaks when it encounters closures, specifically |_| syntax.

find with =(?![{">=\s])([^\s></]*(\s!{0,1}[=|&]{2}\s[^\s></]*)*)

replace with ={$1}

Function components

Function components are a brand new way to write components that require less boilerplate than their structural counter part.

While this change does not force you to change your codebase, this migration time is a good opportunity to start using them in your codebase.

Struct components lifecycle methods and ctx

Struct components also received changes to their API.

ShouldRender removed in favor of bool

ShouldRender removed in favor of bool and can be just find all - replaced throughout your code base.

ctx, props, link

Struct components no longer own props and link, instead they receive ctx: &Context<Self> argument in lifetime methods that can later give you access to ctx.props() -> &Properties and ctx.link() -> &Scope<Self>.

You will need to remove link and props from your component struct fields as such all lifetime methods got updated.

Lifetime methods in Component trait

For new API look in the Component trait

web-sys is no longer re-exported

Add web-sys as your project dependency and one by one add the needed features like Event or Window.

Services

During this update all services were removed in favor of community driven solutions like gloo

Remove this entirely. yew-services adds a layer a abstraction which makes it easier to call external resources. This is all well and good but this layer is supposed to be specific to Yew. It would be better if an framework agnostic abstraction existed instead.

• ConsoleService Use gloo-console or weblog instead.
• DialogService Use gloo-dialogs instead.
• IntervalService Use gloo-timers instead.
• KeyboardService``on* event handlers in yew already handle it. Using this service is even more cumbersome because it requires use of NodeRef in order to call any functions provided by it.

let onkeydown = Callback::from(|e| {
    e.prevent_default();
    todo!("use `e`, just like in service methods.");
});
html! {
    <input {onkeydown} />
}

• ResizeService Use gloo-events to attach the listener instead.
• StorageService Use gloo-storage instead.
• TimeoutService Use gloo-timers instead.
• WebSocketService Use wasm-sockets or gloo-net instead.
• FetchService Use reqwest or gloo-net instead.

New crate - yew-agent

Yew agents were removed to their separate crate, see yew agents migration guide

Ending note

We are sorry if some things are not covered in this guide as it was truly a huge update and we hope that the uncovered issues will be clearly explained by cargo check/build/clippy.