-
Connected
message was only called for first bridge creation. [@nicklaswj, #1029]
Happy 🥧 (PI) Day! This release brings a number of bug fixes for web-sys
apps and ergonomic improvements to the API. Huge thanks to the community for diving into the migration from stdweb
to web-sys
so quickly and uncovering these issues!
-
- Implemented
Clone
forWebSocketStatus
. [@kellytk, #1023] - Improved ergonomics for message APIs by accepting
Into<Msg>
. [@captain-yossarian, #999] html!
improved compiler messages and flexible syntax forwith props
. [@captain-yossarian, #960]
- Implemented
-
- Fixed panic in
stdweb
ResizeService
event handling. [@nicklaswj, #1014] - Removed build check for OS compatibility. [@jstarry, #1019]
- Fixed interval and timer usage in
web-sys
workers by updatinggloo
. [@jstarry, #1018] - Send
Connected
message for Public agents. [@TheNeikos, #1007] - Fixed
web-sys
Public / Private agent initialization. [@jstarry, #1006] - Fixed websocket 'text' message handling for
web-sys
agents. [@jstarry, #1005]
- Fixed panic in
-
FetchError::FetchFailed
enum variant now wraps aString
to hold the failure reason. [@jstarry, #1025]- Message APIs now accept
Into<Msg>
, so callingmsg.into()
will cause compile errors. [@captain-yossarian, #999]
web-sys
support has arrived! @daxpedda spear-headed the effort and courageously integrated web-sys
while maintaining support for stdweb
through no small amount of cfg
macro usage. We chose to continue support for apps built with stdweb
because the dev experience is still quite a bit better (Unfortunately cargo-web
is incompatible with web-sys
). However, the Yew team recognizes that the future of cargo-web
of stdweb
are uncertain. For this reason, we recommend devs start making the switch over to web-sys
and wasm-bindgen
. We will likely invest in improving the dev experience with these tools so that switching over is eventually a no-brainer. Please reach out with ideas and feedback for this migration through Github issues and in our Gitter chatroom!
After upgrading to v0.13, devs will now have to opt in to either stdweb
or web-sys
by using either the "web_sys"
or "std_web"
on the yew
crate in their Cargo.toml
.
# Choose `stdweb`
yew = { version = "0.13", features = ["std_web"] }
# Choose `web-sys`
yew = { version = "0.13", features = ["web_sys"] }
Lastly, take note that API docs on https://docs.rs/yew will be using the "web_sys"
feature. For "std_web"
docs, please visit https://docs.rs/yew-stdweb.
-
-
Added support for building apps with
web-sys
. [@daxpedda, #961] -
Properties 2.0 [@AlephAlpha, #975]
Component properties are now assumed to be required unless otherwise annotated with a default value. Check out the proposal issue #928 for more details!
-
-
- Fixed
Component
children re-rendering bug. [@jstarry, #980] - Fixed panic when interacting with agents after receiving an agent message. [@jstarry, #981]
- Fixed panic when a component with a root
VRef
node is detached. [@jstarry, #983] - Fixed annoying warning when a component with a root
VTag
node is detached. [@jstarry, #983]
- Fixed
-
- Changed
Properties
macro behavior. Check out the proposal issue #928 for more details! [@AlephAlpha, #975] - Cleaned up exported apis and doc visibility. [@jstarry, #977]
ReaderService
methods now return aResult
instead of panicking. [@daxpedda, #868]FetchService
methods now return aResult
instead of panicking. [@daxpedda, #867]StorageService
methods now return aResult
instead of panicking. [@daxpedda, #827]
- Changed
-
- Improved ergonomics for
html! { for .. }
. [@jstarry, #875] - Added
#[props(default = "fn_path")]
for specifying a default property value. [@AlephAlpha, #881] - Exposed the macros for creating format types. [@ctm, #883]
- Added support for binary-only and text-only formats in
WebSocketService
. [@ctm, #851] - Implemented
PartialEq
forChildrenRenderer
to allowchildren
comparison. [@jstarry, #916] - Reduced restrictions on
ComponentLink
methods to improveFuture
support. [@jplatte, #931] - Added
referrer
,referrer_policy
andintegrity
toFetchOptions
. [@leo-lb, #931]
- Improved ergonomics for
This release aims to lay the groundwork for Yew component libraries and clean up the API for the ever elusive 1.0 release.
This release comes with a lot of breaking changes. We understand it's a hassle to update projects but the Yew team felt it was necessary to rip a few bandaids off now as we approach a 1.0 release in the (hopefully) near future. To ease the transition, here's a guide which outlines the main refactoring you will need to do for your project. (Note: all of the changes are reflected in the many example projects if you would like a proper reference example)
This is the main painful breaking change. It applies to both element listeners as well as Component
callback properties. A good rule of thumb is that your components will now have to retain a ComponentLink
to create callbacks on demand or initialize callbacks in your component's create()
method.
Before:
struct Model;
enum Msg {
Click,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
Model
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::Click => true,
}
}
fn view(&self) -> Html<Self> {
// BEFORE: Callbacks were created implicitly from this closure syntax
html! {
<button onclick=|_| Msg::Click>{ "Click me!" }</button>
}
}
}
After:
struct Model {
link: ComponentLink<Self>,
}
enum Msg {
Click,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
Model { link }
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::Click => true,
}
}
fn view(&self) -> Html {
// AFTER: Callbacks need to be explicitly created now
let onclick = self.link.callback(|_| Msg::Click);
html! {
<button onclick=onclick>{ "Click me!" }</button>
}
}
}
If a closure has a parameter you will now need to specify the parameter's type. A tip for finding the appropriate type is to search Yew's repo for the HTML attribute the closure is assigned to.
For example, onkeydown
of <button>
:
let onkeydown = self.link.callback(|e: KeyDownEvent| {
// ...
});
and
html! {
<button onkeydown=onkeydown type="button">
{ "button" }
</button>
}
It should be safe to do a project-wide find/replace for the following:
send_self(
->send_message(
send_back(
->callback(
response(
->respond(
AgentUpdate
->AgentLifecycleEvent
These renames will probably require some more care:
fn handle(
->fn handle_input(
(for Agent trait implementations)
🎉 We are pretty excited about this change! The generic type parameter was confusing and restrictive and is now a thing of the past!
Before:
impl Component for Model {
// ...
fn view(&self) -> Html<Self> {
html! { /* ... */ }
}
}
After:
impl Component for Model {
// ...
fn view(&self) -> Html {
html! { /* ... */ }
}
}
In yew v0.8 we removed the requirement that component properties implement Clone
and in this release we are adding the requirement again. This change is needed
to improve the ergonomics of nested components. The only time properties will be
cloned is when a wrapper component re-renders nested children components.
-
- Added
html_nested!
macro to support nested iterable children access. [@trivigy, #843] - Added
bincode
to the list of supported formats. [@serzhiio, #806] - Added a
noop()
convenience method toCallback
which creates a no-op callback. [@mdtusz, #793] - The
html!
macro now accepts aCallback
for element listeners. [@jstarry, #777]
struct Model { onclick: Callback<ClickEvent>, } enum Msg { Click, } impl Component for Model { type Message = Msg; type Properties = (); fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self { Model { onclick: link.callback(|_| Msg::Click), } } fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { Msg::Click => true, } } fn view(&self) -> Html { html! { <button onclick=&self.onclick>{ "Click me!" }</button> } } }
- Add
send_message_batch
method toComponentLink
. [@hgzimmerman, #748] - Allow compilation to
wasi
target withoutwasm_bindgen
. [@dunnock, #746] AgentLink
now implementsClone
which enablesFuture
usage without explicit Yew framework support. [@izissise, #802]ComponentLink
now implementsClone
which enablesFuture
usage without explicit Yew framework support. [@hgzimmerman, #749]
use wasm_bindgen::JsValue; use wasm_bindgen_futures::future_to_promise; // future must implement `Future<Output = Component::Message> + 'static` let link = self.link.clone(); let js_future = async move { link.send_message(future.await); Ok(JsValue::NULL) }; future_to_promise(js_future);
- Added
-
- Fixed handling of boolean tag attributes. [@mrh0057, #840]
- Improved nested component ergonomics. [@jstarry, #780]
fn view(&self) -> Html { html! { <Wrapper> // This is now valid. (before #780, this would cause a lifetime // compile error because children nodes were moved into a closure) <Nested on_click=&self.nested_on_click /> </Wrapper> } }
- Creating a
Callback
withComponentLink
is no longer restricted to mutable references, improving ergonomics. [@jstarry, #780] - The
Callback
reform
method no longer consumes self making it easier to "reverse map" aCallback
. [@jstarry, #779]
pub struct ListHeader { props: Props, } #[derive(Properties, Clone)] pub struct Props { #[props(required)] pub on_hover: Callback<Hovered>, #[props(required)] pub text: String, } impl Component for ListHeader { type Message = (); type Properties = Props; fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self { ListHeader { props } } fn update(&mut self, _: Self::Message) -> ShouldRender { false } fn view(&self) -> Html { let onmouseover = self.props.on_hover.reform(|_| Hovered::Header); html! { <div class="list-header" onmouseover=onmouseover> { &self.props.text } </div> } } }
- Reduced allocations in the
Classes
to_string
method. [@hgzimmerman, #772] - Empty string class names are now filtered out to prevent panics. [@jstarry, #770]
-
- Components with generic args now need to be closed with the full type path. (e.g.
html! { <Wrapper<String>></Wrapper<String>>}
) [@jstarry, #837] - Changed
VTag
listener type fromBox<dyn Listener>
toRc<dyn Listener>
. [@jstarry, #786] Properties
need to implementClone
again in order to improve nested component ergonomics. [@jstarry, #786]- Removed
send_future
method fromComponentLink
since it is no longer necessary for using Futures with Yew. [@hgzimmerman, #799] - Removed generic type parameter from
Html
and all virtual node types:VNode
,VComp
,VTag
,VList
,VText
, etc. [@jstarry, #783] - Removed support for macro magic closure syntax for element listeners. (See transition guide for how to pass a
Callback
explicitly instead). [@jstarry, #782] - Renamed
Agent
methods and event type for clarity.handle
->handle_input
,AgentUpdate
->AgentLifecycleEvent
,response
->respond
. [@philip-peterson, #751] - The
ComponentLink
send_back
method has been renamed tocallback
for clarity. [@jstarry, #780] - The
ComponentLink
send_self
andsend_self_batch
methods have been renamed tosend_message
andsend_message_batch
for clarity. [@jstarry, #780] - The
Agent
send_back
method has been renamed tocallback
for clarity. [@jstarry, #780] - The
VTag
children
value type has changed fromVec<VNode>
toVList
. [@jstarry, #754]
- Components with generic args now need to be closed with the full type path. (e.g.
-
Future
support 🎉 AComponent
can update following the completion of aFuture
. Check out this example to see how it works. This approach was borrowed from a fork of Yew calledplaster
created by @carlosdp. [@hgzimmerman, #717]- Added the
agent
andservices
features so that this functionality can be disabled (useful if you are switching to usingFuture
s). [@hgzimmerman, #684] - Add
ref
keyword for allowing aComponent
to have a direct reference to its rendered elements. For example, you can now easily focus an<input>
element after mounting. [@jstarry, #715]
use stdweb::web::html_element::InputElement; use stdweb::web::IHtmlElement; use yew::prelude::*; pub struct Input { node_ref: NodeRef, } impl Component for Input { type Message = (); type Properties = (); fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self { Input { node_ref: NodeRef::default(), } } fn mounted(&mut self) -> ShouldRender { if let Some(input) = self.node_ref.try_into::<InputElement>() { input.focus(); } false } fn update(&mut self, _: Self::Message) -> ShouldRender { false } fn view(&self) -> Html<Self> { html! { <input ref=self.node_ref.clone() type="text" /> } } }
- Make
Agent
related typespublic
to allow other crates to create custom agents. [@dunnock, #721] Component::change
will now returnfalse
for components that haveComponent::Properties == ()
. [@kellytk, #690]]- Updated
wasm-bindgen
dependency to0.2.54
. Please update yourwasm-bindgen-cli
tool by runningcargo install --force --version 0.2.54 -- wasm-bindgen-cli
. [@jstarry, #730], [@ctaggart, #681]
-
- Fixed the mount order of components. The root component will be mounted after all descendants have been mounted. [@jstarry, #725]
- All public items now implement
Debug
. [@hgzimmerman, #673]
-
-
Minimum rustc version has been bumped to
1.39.0
forFuture
support. [@jstarry, #730] -
Component
now has a requiredview
method and automatically implements theRenderable
trait. Theview
method in theRenderable
trait has been renamed torender
. [@jstarry, #563]Before:
impl Component for Model { type Message = Msg; type Properties = (); fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self { Model {} } fn update(&mut self, msg: Self::Message) -> ShouldRender { true } } impl Renderable<Model> for Model { fn view(&self) -> Html<Self> { html! { "hello" } } }
After:
impl Component for Model { type Message = Msg; type Properties = (); fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self { Model {} } fn update(&mut self, msg: Self::Message) -> ShouldRender { true } fn view(&self) -> Html<Self> { html! { "hello" } } }
-
Removed the
Transferable
trait since it did no more than extend the serdeSerialize
andDeserialize
traits. [@hgzimmerman, #319]Before:
impl Transferable for Input {} #[derive(Serialize, Deserialize)] pub enum Input { Connect, }
After:
#[derive(Serialize, Deserialize)] pub enum Input { Connect, }
-
WebSocketService::connect
will now return aResult
in order to stop panicking on malformed urls. [@lizhaoxian, #727] -
VTag
now is boxed withinVNode
to shrink the size of its enum representation. [@hgzimmerman, #675]
-
-
- Fix
yew-macro
dependency version
- Fix
Happy Canadian Thanksgiving! 🦃
-
- Implemented
Default
trait forVNode
so thatunwrap_or_default
can be called onOption<Html<Self>>
. [@hgzimmerman, #672] - Implemented
PartialEq
trait forClasses
so that is more ergonomic to useClasses
type in component props. [@hgzimmerman, #680] - Updated
wasm-bindgen
dependency to0.2.50
. Please update yourwasm-bindgen-cli
tool by runningcargo install --force --version 0.2.50 -- wasm-bindgen-cli
. [@jstarry, #695]
- Implemented
-
- Fixed issue where text nodes were sometimes rendered out of order. [@jstarry, #697]
- Fixed regression introduced in 0.9.0 that prevented tag attributes from updating properly. [@jstarry, #698]
- Fixed emscripten builds by pinning the version for the
ryu
downstream dependency. [@jstarry, #703] - Updated
stdweb
to0.4.20
which fixed emscripten builds and unblocked updatingwasm-bindgen
to0.2.50
. [@ctaggart, @jstarry, #683, #694] - Cleaned up build warnings for missing
dyn
keywords. [[@benreyn], #687]
-
-
New
KeyboardService
for setting up key listeners on browsers which support the feature. [@hgzimmerman, #647] -
ComponentLink
can now create aCallback
with more than oneMessage
. TheMessage
's will be batched together so that theComponent
will not be re-rendered more than necessary. [@stkevintan, #660] -
Message
's toPublic
Agent
's will now be queued if theAgent
hasn't finished setting up yet. [@serzhiio, #596] -
Agent
's can now be connected to without aCallback
. Instead of creating a bridge to the agent, create a dispatcher like so:MyAgent::dispatcher()
. [@hgzimmerman, #639] -
Component
's can now accept children in thehtml!
macro. [@jstarry, #589]// app.rs html! { <MyList name="Grocery List"> <MyListItem text="Apples" /> </MyList> }
// my_list.rs use yew::prelude::*; pub struct MyList(Props); #[derive(Properties)] pub struct Props { #[props(required)] pub name: String, pub children: Children<MyListItem>, } impl Renderable<MyList> for MyList { fn view(&self) -> Html<Self> { html! {{ self.props.children.iter().collect::<Html<Self>>() }} } }
-
Iterator
s can now be rendered in thehtml!
macro without using thefor
keyword. [@hgzimmerman, #622]Before:
html! {{ for self.props.items.iter().map(renderItem) }}
After:
html! {{ self.props.items.iter().map(renderItem).collect::<Html<Self>>() }}
-
Closures are now able to be transformed into optional
Callback
properties. [@Wodann, #612] -
Improved CSS class ergonomics with new
Classes
type. [@DenisKolodin, #585], [@hgzimmerman, #626] -
Touch events are now supported
<div ontouchstart=|_| Msg::TouchStart>
[@boydjohnson, #584], [@jstarry, #656] -
The
Component
trait now has anmounted
method which can be implemented to react to when your components have been mounted to the DOM. [@hgzimmerman, #583] -
Additional Fetch options
mode
,cache
, andredirect
are now supported [@davidkna, #579] -
The derive props macro now supports Properties with lifetimes [@jstarry, #580]
-
New
ResizeService
for registering forwindow
size updates [@hgzimmerman, #577]
-
-
- Fixed JS typo in RenderService. This was causing animation frames to not be dropped correctly. [@jstarry, #658]
- Fixed
VNode
orphaning bug when destroyingVTag
elements. This caused someComponent
s to not be properly destroyed when they should have been. [@hgzimmerman, #651] - Fix mishandling of Properties
where
clause in derive_props macro [@astraw, #640]
-
None
Props! Props! Props!
This release introduces a more developer friendly way to handle your Component
props. Use the new #[derive(Properties)]
macro to beef up your props! Property values can now be annotated as #[props(required)]
which will enforce that props are present at compile time. This means that your props struct no longer needs to implement Default
, so time to clean up all of those prop values you wrapped in Option
to have a default value.
-
html!
- Self-closing html tags can now be used:<div class="marker" />
[@totorigolo, #523]html!
- SVG name-spaced tags are now supported! [@jstarry, #550]- Properties can now be required at compile time [@jstarry, #553]
- App components can now be mounted with properties [@jstarry, #567]
- Apps can now be mounted as the
<body>
tag [@jstarry, @kellytk, #540] - Content editable elements can now trigger
oninput
events [@tiziano88, #549]
-
html!
- Class name order is now preserved which unlocks the use of Semantic UI [@charvp, #424]html!
- Dashed tag names and properties are supported [@jstarry, #512, #550]html!
- All rust keywords can be used as tag attributes [@jstarry, #550]html!
- SupportCallback
closure with explicit return type [@totorigolo, #564]html!
- Fixed edge case where>
token would break parser [@totorigolo, #565]- Performance improvement to the diff engine [@totorigolo, #539]
Properties
no longer need to implement thePartialEq
,Clone
, orDefault
traits [@jstarry, #553]Component
will not panic if thechange
method is unimplemented [@jstarry, #554]
-
-
The
Component::Properties
associated type must implement the newProperties
trait [@jstarry, #553]The new
Properties
trait is what powers the ability to check required props are present at compile time. Use the derive props macro to implement automatically.use yew::Properties; #[derive(Properties)] pub struct Props { #[props(required)] pub value: MyStruct, }
-
Callback
props no longer transform intoOption
types [@jstarry, #553]html! { <Button on_click=Msg::Click /> }
before:
#[derive(PartialEq, Clone, Default)] pub struct Props { on_click: Option<Callback<()>>, }
after: note the
#[props(required)]
attribute#[derive(PartialEq, Properties)] pub struct Props { #[props(required)] on_click: Callback<()>, }
-
Commas? We don't need no stinkin' commas!
This release brings a new and improved html!
macro for writing JSX-like syntax. Commas and colons are no longer necessary now that the macro is written as a procedural macro.
-
html!{}
is now valid syntax and can be used to render nothing [@jstarry, #500]- Apps can now be built without
cargo-web
usingwasm-bindgen
[@jstarry, #497] Callback
now implementsDebug
[@DenisKolodin, #485]- New utility method for getting the
host
of the current page [@DenisKolodin, #509]
-
html!
- Commas are no longer necessary for splitting up attributes [@jstarry, #500]html!
- Colons are no longer necessary for denoting aComponent
tag [@jstarry, #500]- Textarea value can be now be set:
<textarea value="content">
[@DenisKolodin, #476] - changed
StorageService::restore
to take an immutable receiver [@dermetfan, #480] - Fixed a component rendering bug [@jstarry, #502]
-
- Added
start_app
convenience method for initializing the app and mounting it to the body [@DenisKolodin, #462] - Added handling of files of
input
element. There is now aChangeData::Files
variant for theonchange
handler [@DenisKolodin, #464] - Added
ReaderService
to read data fromFile
instances. [@DenisKolodin, #464, #468]
- Added
-
- It was impossible to set
value
attribute for any tag instead ofoption
, because it used inner value ofVTag
to keep the value forinput
element. Nowvalue
attribute works foroptions
,progress
tags, etc.
- It was impossible to set
-
- New example
file_upload
that prints sizes of uploaded files [@DenisKolodin, #464]
- New example
🎶 Secret Agent Man 🎶
This release introduces the concept of an Agent
. Agents are separate activities which you could run in the same thread or in a separate thread. There are three types of agents Context
, Job
, Public
described below. To connect to an agent use the Worker::bridge
method and pass a link of component's environment to it.
-
- Introduced the concept of an
Agent
which can run processes in other contexts:Context
agent spawns once per threadJob
agent spawns for every bridgePublic
agent spawns an agent in a separate thread (it uses Web Workers API under the hood).
- Allow setting the whole properties struct of a component with
<Component: with props />
ComponentLink
now has asend_self
method which allows components to update themselves [@DenisKolodin, #365]- All services are re-exported within the
yew::services
module. html!
macro supports multiple classes in a single string:<a class="button is-primary",>
.- Added
FetchOptions
to allow settingCredentials
offetch
request. FetchService
aborts requests usingAbortController
.- Added
SubmitEvent
withonsubmit
rule.
- Introduced the concept of an
-
- Bug with emscripten target
RuntimeError: index out of bounds
fixed with a new scheduler [@DenisKolodin, #272]
- Bug with emscripten target
-
send_back
method requires a mutable reference toself
. This was added to prevent creating callbacks inview
implementations. [@DenisKolodin, #367]Context
requirement removed. It's no longer necessary to useComponent<CTX>
type parameter. Instead, a link to the environment is provided with theComponent::create
call. [@DenisKolodin, #272]