Changelog

• 🛠 Fixes

  • Attempt to fix recursion on display. [@mibes, #2149]
  • Fix default passive option. [@mc1098, #2111]
  • Fix trybuild. [@mc1098, #2103]
  • Fix event handler during capture phase. [@mc1098, #2062]
  • Fix VTag reuse to reset ancestor NodeRef. [@mc1098, #2030]
  • Fix IntoEventCallback over IntoPropValue. [@mc1098, #2025]
  • Remove underscore prefix on fn parameters. [@mc1098, #2010]
  • Fix rust-analyzer #[derive(Properties)] warnings. [@KarlitosVII, #2007]
  • Fix clippy lints from 1.54.0. [@Xavientois, #1976]
  • Fix scheduler main queue delay (#1953). [@intendednull, #1954]
  • Fix case warning on derived properties. [@nitnelave, #1929]
  • yew-macro: fix inability to set the autoplay atribute. [@bakape, #1866]
  • Fix duplicate with props error messages.. [@teymour-aldridge, #1730]
  • Remove extra braces in html_nested macro. [@Madoshakalaka, #2169]
  • Remove unused punct field from props. [@Xavientois, #1969]

• ⚡️ Features

  • Check event bubbling cancellation at each step of propagation. [@rjmac, #2191]
  • Add possibility to cancel bubbling. [@voidpumpkin, #2172]
  • Add the ability to add child nodes conditionally in html!. [@cecton, #1609]
  • Add basic lints to the HTML macro.. [@teymour-aldridge, #1748]
  • Refactor use ref hooks. [@mc1098, #2093]
  • Implementation of portals. [@WorldSEnder, #2147]
  • Allow Classes properties to be created from string literals. [@jplatte, #2141]
  • Use functions from gloo_utils instead of re-implementing them. [@hamza1311, #2124]
  • Reliable use_reducer dispatch and use_state setter. [@futursolo, #2126]
  • Add custom type for attribute values. [@hamza1311, #1994]
  • Remove trailing semicolon in macro used in expression position. [@vrmiguel, #2127]
  • Add set_if_neq for UseStateHandle. [@voidpumpkin, #2109]
  • Add safe first_node fn. [@mc1098, #2094]
  • impl PartialEq for UseStateHandle and UseReducerHandle. [@hamza1311, #2092]
  • Remove web_sys re-export. [@mc1098, #2084]
  • Use into_prop_value to convert str prop to Option. [@Xavientois, #2080]
  • Component lifecycle scheduler optimizations. [@bakape, #2065]
  • Update dependencies. [@mc1098, #2064]
  • Add support for missing boolean attributes. [@mc1098, #2051]
  • Add fully qualified primitives in proc macro. [@mc1098, #2037]
  • Remove 'static lifetime from hook init function. [@mc1098, #2039]
  • Add "struct update" syntax to pass props to component (..props instead of with props). [@Xavientois, #2024]
  • Add no_implicit_prelude to proc macro tests. [@mc1098, #2033]
  • Dev/listener multiplexer. [@bakape, #1542]
  • Remove ShouldRender type alias. [@mc1098, #2011]
  • Components v2 (2). [@hamza1311, #1961]
  • Remove InputData & ChangeData. [@mc1098, #2000]
  • Support const generics in #[derive(Properties)]. [@maciejhirsz, #1978]
  • Add shorthand syntax for props. [@Xavientois, #1970]
  • Static attribute lists. [@bakape, #1962]
  • yew/vlist: optimize diffing and patching. [@bakape, #1555]
  • Add requirement for braces around most props. [@Xavientois, #1939]
  • Optimize VTag construction, memory footprint and patching. [@bakape, #1947]
  • Refactor and cleanup codebase. [@hamza1311, #1842]
  • Helper to build changelog. [@cecton, #1845]
  • Implicit optional attributes. [@siku2, #1637]
  • yew: reduce scheduler call indirection. [@bakape, #1903]
  • Change match statement to if. [@Xavientois, #1884]
  • Optimize vtag construction. [@bakape, #1867]
  • Apply Clippy lints.. [@teymour-aldridge, #1863]
  • Change the app struct to be a real handle to an Yew app instance and make it possible to destroy a running app. [@nicklaswj, #1825]
  • Bring context to standard components. [@Diggsey, #1835]
  • Upgraded Hook API (2). [@hamza1311, #1780]
  • Store hook state in a mutable scoped-TLS. [@Diggsey, #1831]
  • Remove unnecessary allocation from AnyScope. [@Diggsey, #1830]
  • Added missing licenses to Cargo.toml files and updated to use SPDX syntax. [@jbg, #1822]
  • Update Rust version for macro tests to 1.51 & enable const generics tests. [@hamza1311, #1801]
  • Allow the use of Rust keywords for element names. [@siku2, #1772]
  • Refactor html tag peeking. [@lukechu10, #1738]
  • Generic functional components. [@lukechu10, #1756]
  • Add support for the unit struct in Properties derive. [@Xavientois, #1752]
  • Rip out stdweb. [@philip-peterson, #1697]

Changelog

• 🛠 Fixes

  • Fix Some Router Behaviour. [@futursolo, #2107]
  • Fix multiple field enum tokens. [@mc1098, #1988]
  • Fix clippy lints from 1.54.0. [@Xavientois, #1976]
  • Fix router. [@hamza1311, #1856]
  • update nom 6.1.2 and fix compile errors.. [@higumachan, #1806]

• ⚡️ Features

  • Add missing router docs: Redirect, Nested Router, and Path Segament capturing. [@Madoshakalaka, #2192]
  • use base url for href of links. [@WorldSEnder, #2177]
  • Use functions from gloo_utils instead of re-implementing them. [@hamza1311, #2124]
  • Update Yew Router as per #2113. [@futursolo, #2118]
  • Update dependencies. [@mc1098, #2064]
  • Add "replace route" call as a companion to "push route". [@rjmac, #2023]
  • Add shorthand syntax for props. [@Xavientois, #1970]
  • Add requirement for braces around most props. [@Xavientois, #1939]
  • Clean-up and optimize router a little bit. [@hamza1311, #1869]
  • Apply Clippy lints.. [@teymour-aldridge, #1863]
  • Rewrite router. [@hamza1311, #1791]
  • Added missing licenses to Cargo.toml files and updated to use SPDX syntax. [@jbg, #1822]
  • Update Rust version for macro tests to 1.51 & enable const generics tests. [@hamza1311, #1801]
  • Add support for the unit struct in Properties derive. [@Xavientois, #1752]

Changelog

• 🛠 Fixes

  • Fix unmaintained anymap dependency. [@mc1098, #2071]
  • Fix clippy lints from 1.54.0. [@Xavientois, #1976]
  • Fix crash in link to destroyed agents. [@kristoff3r, #1827]

• ⚡️ Features

  • allow web worker resource to be relative. [@astraw, #2086]
  • use_bridge hook for agents. [@futursolo, #2125]
  • Use functions from gloo_utils instead of re-implementing them. [@hamza1311, #2124]
  • yew-agent: add missing web-sys features. [@astraw, #2085]
  • Update dependencies. [@mc1098, #2064]
  • Drop Private worker handler when bridge is dropped. [@FrancisMurillo, #1944]

Changelog

• 🛠 Fixes

  • Fix missing redirects. [@siku2, #1640]
  • Remove Drop bound from Task trait. [@siku2, #1627]
  • Enable std feature for indexmap. [@jstarry, #1709]

• ⚡️ Features

  • Implicit optional attributes. [@siku2, #1637]
  • Added callback_future_once in yewtil.(#1712). [@fraillt, #1696]
  • Added relevant examples section to the docs. [@oOBoomberOo, #1695]
  • Added missing KeyboardService re-export. [@SOF3, #1694]
  • Rename internal Agent structs to match Component. [@jstarry, #1688]
  • Add discussion link to issue selector. [@jstarry, #1674]
  • Update link to Material Design Components. [@TapioT, #1662]
  • Extract Classes to a separate macro. [@cecton, #1601]
  • Improve the "keyed_list" example. [@titaneric, #1650]
  • Add documentation for component children. [@K4rakara, #1616]
  • Add a macro for building properties outside of html!. [@siku2, #1599]

Changelog

• 🛠 Fixes

  • Fixed a "call stack exceeded" panic that occurred if a Component was updated many times [@jstarry, #1624]

Changelog

• ⚡️ Features

  • Added prompt function to DialogService. [@teymour-aldridge, #1350]
  • Implement From<&[T]> where T: AsRef<str> for Classes. [@alexschrod, #1448]
  • Added batch_callback_once to ComponentLink. [@ctron, #1463]

• 🛠 Fixes

  • Properties with default type params can now have Properties trait derived. [@siku2, #1408]
  • html!: Improved compile error messages for invalid list fragments. [@siku2, #1445]
  • Batch component updates are processed more efficiently. [@bakape, #1470]

Changelog

• ⚡️ Features

  • Key now implements Deref<Target = str>. [@faulesocke, #1370]

• 🛠 Fixes

  • Uncontrolled input values are no cleared when component renders. [@jstarry, #1374]
  • Revert lazy rendering behavior introduced in 0.17.0. Yew will render the component between each update. [@jstarry, #1373]

Changelog

• 🛠 Fixes

  • Fixed regression where component rendered lifecycle method was called before children components finish rendering. [@jstarry, #1360]

Changelog

• ⚡️ Features

  • Allow agents to send input messages to themselves. [@mkawalec, #1278]

  • Rendering performance has been improved by ~20%. [@jstarry, #1296, #1309]

  • html!: Elements can be specified with dynamic tag names. [@siku2, #1266]

    In order to specify a dynamic tag name, wrap an expression with @{..}:

    let tag_name = "input";
    html! { <@{tag_name} value="Hello" /> }
    

  • HTML button element type can now be specified ("submit", "reset", or "button"). [@captain-yossarian, #1033]

  • All global event listeners can be used as listeners (onerror, onloadend, and many more). [@siku2, #1244]

  • PartialEq is now implemented for VChild when properties also implement PartialEq. [@kellpossible, #1242]

  • Agent callbacks now accept Into<Message> to improve ergonomics. [@totorigolo, #1215]

  • Agents can now send messages to themselves. [@totorigolo, #1215]

• 🛠 Fixes

  • Bincode dependency version has been loosened 1.2.1 -> 1. [@jstarry, #1349]

  • Keyed list ordering algorithm has been fixed. [@totorigolo and @jstarry, #1231]

  • html!: key and ref are no longer ignored for components with no properties. [@jstarry, #1338]

  • html!: List rendering behavior is consistent no matter which syntax is chosen. [@siku2, #1275]

    html! { for node_list } is now equivalent to html! { node_list } when node_list is a Vec<VNode>.

  • KeyboardService events can now have default behavior prevented. [@ghpu, #1286]

  • Yew will check the current DOM input value before comparing with the desired value. [@ShadoySV, #1268]

  • html!: Void elements (<br/>, <input />) are no longer allowed to have children. [@kaoet, #1217]

  • Local agents no longer require Input and Output to implement Serializable. [@mkawalec, #1195]

• 🚨 Breaking changes

  • Renders are now done lazily and will not be executed until all updates have been processed. [@jstarry, #1309]

  • ConsoleService, DialogService, IntervalService, RenderService, TimeoutService, and WebSocketService methods are now static. [@teymour-aldridge, #1313]

  • html!: Children no longer implements Renderable. [@siku2, #1275]

    Replace instances of self.props.children.render() with self.props.children.clone().

  • Yew no longer stops propagation of events by default. [@jstarry, #1256]

    Event propagation is usually stopped when you have event listeners attached to nested elements and do not want the event to bubble up from where it was first captured. If your app has this behavior, you can stop propagation by calling stop_propagation() on the desired event.

  • The onsubmit listener now uses FocusEvent instead Event when using web-sys. [@siku2, #1244]

  • The onmousewheel and ontouchenter listeners have been removed. [@siku2, #1244]

  • The ondoubleclick listener is now named ondblclick. [@siku2, #1244]

  • FetchService methods are now static. [@teymour-aldridge, #1235]

    Instead of FetchService::new().fetch(..) you should now use FetchService::fetch(..)

  • The send_message_batch method has been removed from AgentLink. [@totorigolo, #1215]

  • Minimum supported rust version has been bumped from 1.40.0 to 1.42.0. [@mkawalec, #1195]

  • Every agent Reach type is now generic. [@mkawalec, #1195]

    In order to fix your app, simply append <Self> to the reach:

    Reach = Context -> Reach = Context<Self>

  • Removed Global agent because it was never implemented. [@jstarry, #1202]

  • Reduced visibility of internal agent types that were not intended to be public. [@jstarry, #1202]

Changelog

• 🛠 Fixes

  • Fixed regression where messages sent from Component::create were skipped. [@jstarry, #1225]

Changelog

• 🛠 Fixes

  • Worker script is now loaded from absolute path. [@domdir, #1175]
  • Improved html! macro error messages. [@teymour-aldridge, #1192], [@kaoet, #1219]

Changelog

• ⚡️ Features

  • Added optional id, class, and placeholder properties to the Select component. [@Stigjb, #1187]

  • Re-export web-sys from Yew. This allows projects to use web-sys without adding it to their Cargo.toml. [@D4nte, #1176]

  • Added support for Option wrapped class names. [@liquidblock, #1085]

    The following code is now supported:

    let color: &Option<String> = &self.color;
    html! { <div class=("btn", color)></div> }
    

  • Added get_parent and get_component methods to ComponentLink to allow access to parent component state. [@jstarry, #1151]

• 🛠 Fixes

  • Fixed bug that caused html class attributes to be set to an empty string. [@liquidblock, #1085]
  • Fixed Private worker lifecycle event sending. [@joaquindk, #1146]

• 🚨 Breaking changes

  • Bumped minimum supported Rust version (MSRV) to 1.40.0. [@jstarry, #1152]

Attention!

yew now uses web-sys by default. If your project uses web-sys, you can now drop the "web_sys" feature from your yew dependency. Don't worry stdweb users, we have created a new alias crate for y'all called yew-stdweb. In order to use it, update your Cargo.toml yew dependency to the following:

yew = { version = "0.15", package = "yew-stdweb" }

Dev Survey Results

Thank you to everyone that took the time to fill out the Yew Dev Survey! 🙇‍♂️

Results have been posted here: https://github.com/yewstack/yew/wiki/Dev-Survey-%5BSpring-2020%5D

New Chatroom

We moved from Gitter to Discord! Join us: https://discord.gg/VQck8X4

Changelog

• ⚡️ Features

  • Add support for single use callbacks (useful for TimeoutService). [@lukerandall, #1125]
  • Updated scheduler to eagerly destroy components to avoid unnecessary renders. [@jstarry, #1072]
  • Add support key attribute to improve rendering performance. [@mrh0057, #1076]

• 🛠 Fixes

  • Split class names on whitespace when passed within tuple or Vec. [@bryanjswift, #1084]

• 🚨 Breaking changes

  • The components module has been moved out yew and into yew-components. [@jstarry, #1132]
  • Replaced mounted component lifecycle method with rendered which is called after each render. [@jstarry, #1072]
  • Components must now implement the change method (forgetting this was a very common issue). [@jstarry, #1071]
  • Yew now builds with web-sys by default. [@jstarry, #1092]

🛠 Fixes

• Remove html! component validation to allow generic components. [@mankinskin, #1065]
• Improve Debug formatting for VTag and VText. [@dancespiele, #1059]
• Implement Default for Callback. [@TheNeikos, #1043]

🛠 Fixes

• Fix issue where components were rendered out of order. [@mrh0057 & @jstarry, #1051]
• Reset Select component correctly in Firefox / Edge. [@kuy, #987]

🛠 Fixes

• 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!

Changelog

• ⚡️ Features

  • Implemented Clone for WebSocketStatus. [@kellytk, #1023]
  • Improved ergonomics for message APIs by accepting Into<Msg>. [@captain-yossarian, #999]
  • html! improved compiler messages and flexible syntax for with props. [@captain-yossarian, #960]

• 🛠 Fixes

  • 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 updating gloo. [@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]

• 🚨 Breaking changes

  • FetchError::FetchFailed enum variant now wraps a String to hold the failure reason. [@jstarry, #1025]
  • Message APIs now accept Into<Msg>, so calling msg.into() will cause compile errors. [@captain-yossarian, #999]

• 🛠 Fixes

Fix clippy warning when building with web_sys feature. [@jstarry, #1001]

🛠 Fixes

Fix for web-sys version 0.3.36. [@detegr, #997]

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.

Changelog

• ⚡️ Features

  • 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!

• 🛠 Fixes

  • 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]

• 🚨 Breaking changes

  • 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 a Result instead of panicking. [@daxpedda, #868]
  • FetchService methods now return a Result instead of panicking. [@daxpedda, #867]
  • StorageService methods now return a Result instead of panicking. [@daxpedda, #827]

Happy (belated) Valentine's Day for all who ♥️ Yew! Yew ♥️'s you too! This release, as always, packs a bunch of fixes and features from the Yew community. Take special care of the few breaking changes.

• ⚡️ Features

  • 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 for ChildrenRenderer to allow children comparison. [@jstarry, #916]
  • Reduced restrictions on ComponentLink methods to improve Future support. [@jplatte, #931]
  • Added referrer, referrer_policy and integrity to FetchOptions. [@leo-lb, #931]

• 🛠 Fixes

  • Fixed touch event listeners. [@AlephAlpha, #872]
  • Fixed bad behavior when setting a ref on a Component. [@jstarry, #913]
  • Fixed ResizeTask cancellation. [@jstarry, #915]

• 🚨 Breaking changes

  • Switched from using failure to anyhow and thiserror for Yew errors. [@daxpedda, #863]
  • Removed cancel method from Task trait in favor of relying on Drop. [@kakoc, #899]
  • Renamed NodeRef.try_into to NodeRef.cast to avoid trait conflicts. [@jstarry, #917]

This release aims to lay the groundwork for Yew component libraries as well as clean up the API for the ever elusive 1.0 release 😜

Transition Guide

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)

1. Callback syntax

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>
}

2. Method Renames

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)

3. Drop Generic Types for Html<Self> -> Html

:tada: 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! { /* ... */ }
    }
}

4. Properties must implement Clone

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.

Changelog

• ⚡️ Features

  • 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 to Callback which creates a no-op callback. [@mdtusz, #793]
  • The html! macro now accepts a Callback 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 to ComponentLink. [@hgzimmerman, #748]
  • Allow compilation to wasi target without wasm_bindgen. [@dunnock, #746]
  • AgentLink now implements Clone which enables Future usage without explicit Yew framework support. [@izissise, #802]
  • ComponentLink now implements Clone which enables Future 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);
  

• 🛠 Fixes

  • 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 with ComponentLink 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" a Callback. [@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]

• 🚨 Breaking changes

  • 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 from Box<dyn Listener> to Rc<dyn Listener>. [@jstarry, #786]
  • Properties need to implement Clone again in order to improve nested component ergonomics. [@jstarry, #786]
  • Removed send_future method from ComponentLink 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 to callback for clarity. [@jstarry, #780]
  • The ComponentLink send_self and send_self_batch methods have been renamed to send_message and send_message_batch for clarity. [@jstarry, #780]
  • The Agent send_back method has been renamed to callback for clarity. [@jstarry, #780]
  • The VTag children value type has changed from Vec<VNode> to VList. [@jstarry, #754]

Back to the...

• ⚡️ Features

  • Future support :tada: A Component can update following the completion of a Future. Check out this example to see how it works. This approach was borrowed from a fork of Yew called plaster created by @carlosdp. [@hgzimmerman, #717]
  • Added the agent and services features so that those modules can be disabled (useful if you are switching to using Futures). [@hgzimmerman, #684]
  • Add ref keyword for allowing a Component 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::*;
  
  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 types public to allow other crates to create custom agents. [@dunnock, #721]
  • Component::change will now return false for components that have Component::Properties == (). [@kellytk, #690]]
  • Updated wasm-bindgen dependency to 0.2.54. Please update your wasm-bindgen-cli tool by running cargo install --force --version 0.2.54 -- wasm-bindgen-cli. [@jstarry, #730], [@ctaggart, #681]

• 🛠 Fixes

  • 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]

• 🚨 Breaking changes

  • Minimum rustc version has been bumped to 1.39.0 for Future support. [@jstarry, #730]

  • Component now has a required view method and automatically implements the Renderable trait. The view method in the Renderable trait has been renamed to render. [@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 serde Serialize and Deserialize 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 a Result in order to stop panicking on malformed urls. [@lizhaoxian, #727]

  • VTag now is boxed within VNode to shrink the size of its enum representation. [@hgzimmerman, #675]

Fixed yew-macro dependency version

Happy Canadian Thanksgiving! 🦃

• ⚡️ Features

  • Implemented Default trait for VNode so that unwrap_or_default can be called on Option<Html<Self>>. [@hgzimmerman, #672]
  • Implemented PartialEq trait for Classes so that is more ergonomic to use Classes type in component props. [@hgzimmerman, #680]
  • Updated wasm-bindgen dependency to 0.2.50. Please update your wasm-bindgen-cli tool by running cargo install --force --version 0.2.50 -- wasm-bindgen-cli. [@jstarry, #695]

• 🛠 Fixes

  • 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 to 0.4.20 which fixed emscripten builds and unblocked updating wasm-bindgen to 0.2.50. [@ctaggart, @jstarry, #683, #694]
  • Cleaned up build warnings for missing dyn keywords. [@benreyn, #687]

Feature Overload

This release introduces a slew of new features, many of which come from first-time contributors! There's too many to mention so read more below 😄 Also, a long-standing bug was fixed by @hgzimmerman which was causing Component's to not be destroyed properly.

• ⚡️ Features

  • New KeyboardService for setting up key listeners on browsers which support the feature. [@hgzimmerman, #647]

  • ComponentLink can now create a Callback with more than one Message. The Message's will be batched together so that the Component will not be re-rendered more than necessary. [@stkevintan, #660]

  • Message's to Public Agent's will now be queued if the Agent hasn't finished setting up yet. [@serzhiio, #596]

  • Agent's can now be connected to without a Callback. Instead of creating a bridge to the agent, create a dispatcher like so: MyAgent::dispatcher(). [@hgzimmerman, #639]

  • Component's can now accept children in the html! 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>>()
        }}
      }
    }
    

  • Iterators can now be rendered in the html! macro without using the for 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 an mounted method which can be implemented to react to when your components have been mounted to the DOM. [@hgzimmerman, #583]

  • Additional Fetch options mode, cache, and redirect are now supported [@davidkna, #579]

  • The derive props macro now supports Properties with lifetimes [@jstarry, #580]

  • New ResizeService for registering for window size updates [@hgzimmerman, #577]

• 🛠 Fixes

  • Fixed JS typo in RenderService. This was causing animation frames to not be dropped correctly. [@jstarry, #658]
  • Fixed VNode orphaning bug when destroying VTag elements. This caused some Components to not be properly destroyed when they should have been. [@hgzimmerman, #651]
  • Fix mishandling of Properties where clause in derive_props macro [@astraw, #640]

• 🚨 Breaking changes

  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.

• ⚡️ Features

  • 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]

• 🛠 Fixes

  • 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! - Support Callback 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 the PartialEq, Clone, or Default traits [@jstarry, #553]
  • Component will not panic if the change method is unimplemented [@jstarry, #554]

• 🚨 Breaking changes

  • The Component::Properties associated type must implement the new Properties 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 into Option 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<()>,
    }