Highlights​

New #[component] Attribute​

The #[function_component] attribute has been renamed to #[component] for brevity:

// Before
#[function_component]
fn MyComponent() -> Html {
    html! { <div>{"Hello!"}</div> }
}

// After (0.22+)
#[component]
fn MyComponent() -> Html {
    html! { <div>{"Hello!"}</div> }
}

The old #[function_component] attribute is deprecated but still works, giving you time to migrate.

For-Loops in html!​

You can now use for-loops directly in the html! macro, making iteration more natural:

// Before - using iterator adapters
html! {
    <ul>
        { for items.iter().map(|item| html! { <li>{ item }</li> }) }
    </ul>
}

// After (0.22+) - native for-loop syntax
html! {
    <ul>
        for item in items {
            <li>{ item }</li>
        }
    </ul>
}

MSRV Raised to 1.84.0​

The minimum supported Rust version is now 1.84.0. This allows us to use newer language features and provide better error messages.

WASI Support for SSR​

Server-side rendering now works on WASI targets. See the original 0.22 announcement for details.

Better Cloning Ergonomics​

• ImplicitClone is implemented for more yew types. This means less & and * and .clone() clutter in the html macro.

yew-agent: Vendored gloo-workers​

The yew-agent crate now includes its own web worker implementation, removing the external dependency on gloo-worker. This also adds support for module-type web workers:

let spawner = WorkerSpawner::<MyWorker>::new()
    .as_module(true)  // Use ES module workers
    .spawn();

yew-router: Query Parameter Traits​

The FromQuery and ToQuery traits from gloo are now re-exported via yew_router::query for more flexible query parameter handling, along with dynamic basename support.

Migration Guide​

See the migration guide for detailed instructions on upgrading from 0.21.

Contributors​

Many thanks to everyone who contributed to this release! Special thanks to:

• @WorldSEnder for hydration fixes
• @its-the-shrimp for html macro enhancements
• @Kirill Semyonkin for implicit clone library improvements
• @langyo for WASI SSR support
• @cecton for implicit clone improvements and ergonomics
• @ranile for property improvements

And all the other contributors who helped make this release possible!

What's Next​

We're continuing to work on improving Yew's performance, developer experience, and documentation. Join us on Discord to get involved!

See the full changelog for all changes.

SSR on WASI​

Before Yew 0.22, server-side rendering (SSR) was only possible on the native target. With Yew 0.22, you can now render your Yew application on the WebAssembly System Interface (WASI) target.

Since the old SSR implementation will create new tasks directly in the asynchronous context directly (based on prokio). It only allowed in a multi-threaded environment that it is not compatible with WASI. So the new version added a dedicated one for a single-threaded environment that rendering function to support single-threaded scenes.

Learn more at Server-side rendering example on WASI environment

Call for Contributors​

The Yew project thrives on community involvement, and we welcome contributors with open arms. Whether you're an experienced Rust developer or just starting your journey, there are plenty of ways to get involved and make a meaningful impact on Yew's growth.

Here are some areas where you can contribute:

• Code Contributions: If you're passionate about web development with Rust, consider contributing code to Yew. Whether it's fixing bugs, adding new features, or improving documentation, your code can help make Yew even better.

• Documentation: Clear and comprehensive documentation is vital for any project's success. You can contribute by improving documentation, writing tutorials, or creating examples that help others understand and use Yew effectively.

• Testing and Bug Reporting: Testing Yew and reporting bugs you encounter is a valuable contribution. Your feedback helps us identify and fix issues, ensuring a more stable framework for everyone.

• Community Support: Join discussions, chat rooms (we have our own Discord and Matrix!), or social media to assist other developers using Yew. Sharing your knowledge and helping others solve problems is a fantastic way to contribute.

Contributing to open-source projects like Yew is not only a way to give back to the community but also an excellent opportunity to learn, collaborate, and enhance your skills.

To get started, check out the Yew GitHub repository and the contribution guidelines. Your contributions are highly appreciated and play a crucial role in shaping the future of Yew. Join us in this exciting journey!

Thanks!​

Many people came together to create Yew 0.22. We couldn't have done it without all of you. Thanks!

See the full changelog

What's new​

1. Changing Signatures: A Shift in Hook Dependencies​

One of the significant changes in Yew 0.21 is the adjustment to the signature of hooks that accept dependencies. Dependencies used to be passed as the second argument after the closure. However, now they're passed as the first argument before the closure.

use_effect_with_deps(deps, move |deps: Vec<i32>| {
    // Do something with dependencies
});

The reason behind swapping the order of dependencies in the code snippet is to address a specific use case. In situations where the same value is needed both to compute a dependency and to be moved by value into the closure, the new order simplifies the code and improves readability and ergonomics.

This is a big breaking change so we've provided a way to automate the refactor

2. Versatile Child Types​

Yew now allows you to use any type as children within your components. This means you're no longer limited to just the Children type. Instead, you can use any type, even Html or closures, unlocking patterns such as:

html! {
    <Comp>
        {|p: RenderProps| html!{<>{"Hello, "}{p.name}</>}}
    </Comp>
}

3. Agents: A Complete Rewrite​

Yew 0.21 brings a complete rewrite of yew-agent. This streamlines and simplifies the way workers operate. Here's what you need to know:

• Introducing Providers: Say goodbye to the old Worker::bridge() method. Now, you can use the use WorkerProvider / ReactorProvider / OneshotProvider as per your need, by creating them using the hooks.

• WorkerLink to WorkerScope: We've removed WorkerLink in favor of WorkerScope. This change simplifies the worker architecture, making it more straightforward to manage and maintain.

There are now 3 types of agents to be used, depending upon the situation:

• Worker Agent: The original agent that uses an actor model, designed to handle complex states.

• Oneshot Agent: Designed for scenarios where you expect a single input and a single output for each agent.

• Reactor Agent: Ideal for situations where multiple inputs and multiple outputs are needed for each agent.

Learn more in documentation of yew-agent

4. Performance Improvements: A Faster and Smoother Experience​

Yew 0.21 brings substantial performance improvements. Your web applications will run faster and more efficiently, thanks to optimizations that reduce memory usage and enhance rendering.

Call for Contributors​

The Yew project thrives on community involvement, and we welcome contributors with open arms. Whether you're an experienced Rust developer or just starting your journey, there are plenty of ways to get involved and make a meaningful impact on Yew's growth.

Here are some areas where you can contribute:

• Code Contributions: If you're passionate about web development with Rust, consider contributing code to Yew. Whether it's fixing bugs, adding new features, or improving documentation, your code can help make Yew even better.

• Documentation: Clear and comprehensive documentation is vital for any project's success. You can contribute by improving documentation, writing tutorials, or creating examples that help others understand and use Yew effectively.

• Testing and Bug Reporting: Testing Yew and reporting bugs you encounter is a valuable contribution. Your feedback helps us identify and fix issues, ensuring a more stable framework for everyone.

• Community Support: Join discussions, chat rooms (we have our own Discord and Matrix!), or social media to assist other developers using Yew. Sharing your knowledge and helping others solve problems is a fantastic way to contribute.

Contributing to open-source projects like Yew is not only a way to give back to the community but also an excellent opportunity to learn, collaborate, and enhance your skills.

To get started, check out the Yew GitHub repository and the contribution guidelines. Your contributions are highly appreciated and play a crucial role in shaping the future of Yew. Join us in this exciting journey!

Thanks!​

Many people came together to create Yew 0.21. We couldn't have done it without all of you. Thanks!

See the full changelog

What's new​

This release comes with new features aimed at improving the user experience, such as server-rendering and render-as-you-fetch approach for data-fetching.

SSR​

Yew now fully supports rendering on the server. Rendering on the server means users will get a rendered HTML and will not have to wait to be able to see anything until the entire WebAssembly bundle is downloaded and initial render has completed. With SSR, the page will be visible instantly, and interactable as soon as hydration finishes.

Learn more at Server-side rendering

Data fetching​

With SSR comes new ways of data-fetching. The newly added use_prepared_state! hook can be used to fetch data while rendering on the server and seamlessly use it in the component.

For client-side fetching, Yew now supports render-as-you-fetch approach with Suspense.

How to upgrade​

There have been breaking changes in this release. Our migration guides go over how to upgrade each over of the new crates.

Thanks!​

Many people came together to help make this release happen. We couldn't have done it without all of you. Thanks!

Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.