yewstack/yew

Rust / Wasm client web app framework

Pull requests which improve test coverage are also very welcome

Yew

Rust / Wasm client web app framework

Documentation (stable) | Documentation (latest) | Examples | Changelog | Roadmap | 简体中文文档 | 繁體中文文檔 | ドキュメント

About

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

  • Features a macro for declaring interactive HTML with Rust expressions. Developers who have experience using JSX in React should feel quite at home when using Yew.
  • Achieves high performance by minimizing DOM API calls for each page render and by making it easy to offload processing to background web workers.
  • Supports JavaScript interoperability, allowing developers to leverage NPM packages and integrate with existing JavaScript applications.

Note: Yew is not 1.0 yet. Be prepared to do major refactoring due to breaking API changes.

Contributing

Yew is a community effort and we welcome all kinds of contributions, big or small, from developers of all backgrounds. We want the Yew community to be a fun and friendly place, so please review our Code of Conduct to learn what behavior will not be tolerated.

🤠 New to Yew?

Start learning about the framework by helping us improve our documentation. Pull requests which improve test coverage are also very welcome.

😎 Looking for inspiration?

Check out the community curated list of awesome things related to Yew / WebAssembly at jetli/awesome-yew.

🤔 Confused about something?

Feel free to drop into our Discord chatroom or open a new "Question" issue to get help from contributors. Often questions lead to improvements to the ergonomics of the framework, better documentation, and even new features!

🙂 Ready to dive into the code?

After reviewing the Contribution Guide, check out the "Good First Issues" (they are eager for attention!). Once you find one that interests you, feel free to assign yourself to an issue and don't hesitate to reach out for guidance, the issues vary in complexity.

😱 Found a bug?

Please report all bugs! We are happy to help support developers fix the bugs they find if they are interested and have the time.

🤓 Want to help translate?

Translations can be submitted on the Yew GitLocalize Repo. If you are interested in being the official moderator for a language, please reach out on Discord.

Contributors

Code Contributors

This project exists thanks to all the people who contribute.

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Issues

Collection of the latest Issues

kinnison

kinnison

documentation
Comment Icon2

This is about:

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

Problem

While there are lots of examples, including from the Yew project itself, for writing components in a library crate; there are few, or no, examples which show how to bundle additional assets in with the component library.

I appreciate that Yew is meant to be non-"partisan" when it comes to bundling technologies; but it would seem that trunk has won most of the argument. However, when looking through trunk's documentation, I could not find anything about assets from dependencies either.

I am looking to wrapper a number of JS libraries as part of my next project, and while I could wrapper them all in my application crate, thereby bypassing the problem because all the JS and CSS will end up referenced in my top level index.html, I would prefer to write some component library crates and have them easily consumed by other application authors as well.

Details about the solution you'd like

It would be great if, alongside the tutorial which currently exists, there were out-links to exemplary crates doing this kind of thing, or even better, a tutorial about doing it at the level of the tutorial which exists already.

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
Nobilitate

Nobilitate

bug
Comment Icon2

Problem This is a very minor thing, but many people may search for yew_router and be sent to the old archived Github project. That project links to this repository, but the link is broken since this repository was reorganized into packages.

Steps To Reproduce Steps to reproduce the behavior:

  1. Go to https://github.com/yewstack/yew_router
  2. Click on the link within "moved to here" at the top of the README
  3. Observe a Github 404 page
  4. Note that the URL was https://github.com/yewstack/yew/tree/master/yew-router, which is no longer valid.

Expected behavior The link should direct users to https://github.com/yewstack/yew/tree/master/packages/yew-router

Environment: Github

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later

I had already gone to make a PR before realizing the repository was archived. The forked changes are here:

https://github.com/yewstack/yew_router/compare/master...Nobilitate:patch-1?expand=1

hamza1311

hamza1311

documentation
Comment Icon8

Currently, yew.rs is built using Docusaurus, which uses React. It was used because at the time Yew did not have a way to render page to HTML files (SSG). This has now been resolved for the most part.

https://yew.rs should be built using Yew. It would be better to build a documentation engine like Docusaurus, then use it to build the website. But that's a huge undertaking that I'm not sure if anyone is willing to take on right now

futursolo

futursolo

feature-request
Comment Icon0

Tokio has just landed support for wasm32-wasi. However, wasi misses some essential features for Yew Runtime to become useful under wasi.

wasi can be used for:

  • Client-Side Rendering (wasi in Browser)
  • Server-Side Rendering (wasi in JavaScript-capable WebAssembly Runtime & Standalone WebAssembly Runtime)
  • Static-Site Generation (wasi in JavaScript-capable WebAssembly Runtime & Standalone WebAssembly Runtime)

This issue tracks the tokio features required to land wasi support for Yew Runtime:

  • wasi target currently lacks networking capability in general. (needed for CSR and SSR.) This is primarily due to sockets under wasi is not standardised. There is an alternative proposal for an HTTP interface.
  • tokio::fs for wasi. (needed for SSG and potentially SSR.)

There are some other features that might be desirable before we start to implement the target:

  • multi-threading support so multiple CPU cores can be utilised.
hamza1311

hamza1311

feature-request
Comment Icon2

Background

One of the big reasons to use server side rendering is to make the site accessible to crawlers and bots, which often look at the the metadata in <head> to determine the site's contents. It is crucial to have the <head> fully rendered when HTML is returned on first render

Problem

Right now, there's no (ergonomic) way to render the <head>. Our examples only show how to render the body. Trunk also interferes because index.html is generated by it and not us.

Possible Solution

Trunk generates the artifacts like:

The server would:

  1. Read the index.html
  2. Modify the head to keep all the link tags and such (for assets) and add all the elements generated from the ServerRenderer
  3. Send the updated HTML

Drawbacks

We can't stream the response. We would need the server to obtain the entirety of HTML from ServerRenderer, parse it, take the <head> from it and modify the trunk generated index.html accordingly.

Additional Requirement

It should be possible to set the <head> from anywhere in the component tree, in a vein similar to next/head

kulicuu

kulicuu

bug
Comment Icon1

Problem I am returning to WebGL work after some time away (with Vulkan) so may be misinterpreting something here, but... The WebGL example loops through the render_gl function every frame. Therefore it's recompiling the shaders, linking them, all of this work that doesn't need to be repeated in the render loop.

Steps To Reproduce Steps to reproduce the behavior: Start the app as normal, set a log statement inside render_gl function but outside the closure I assume is intended for the actual render-loop logics, and see the numbers climb with every frame.

Expected behavior I would expect the main body of render_gl to not be re-executed with every frame. For example, the shaders should be compiled and linked once only.

Screenshots If applicable, add screenshots to help explain your problem.

Environment:

  • Yew 19.3
  • Rust stable
  • Build tool trunk
WorldSEnder

WorldSEnder

A-yew
Comment Icon1

Yew 0.20 will focus on making Yew applications SEO friendly and pre-rendering the page with server-side rendering (SSR). We're also ironing out our function component support, with hooks that should be familiar if you're coming from React (this part is for the most part done on the master branch).

The plan towards yew 0.20

  • Allow generating state on server side and subsequently consume it on the client in SSR #2649

  • Immutable #2563

  • Remove ref for components: #2505 + #2783

  • Improve testing of components. Could be accomplished by

    • Document at least one possible way to reuse an existing framework for E2E testing #196
    • Rework the exposed yew::tests modules #2679 which could also address #1412
  • Fix event types for some uncommon event types #2691

  • Decide on prop vs attribute usage #2530, #1322

  • Decide on API breakage needed for #2724

  • Additional documentation

    • #2682
    • #2789
    • #2818
    • #2614
    • #2612
    • #2574
    • #2571
    • #2197
    • #1843

Minor issues and stretch

  • Document and battle-test SSR edgecases, i.e. #2684
  • Nightly-only features tracked in #2681
  • Performance of the html macro #2520 and minor issues #2225, #1979
  • Homepage #2393 and slogan #2378
  • Prop order might be unintuitive #1634
  • Allow empty dynamic tags #1269
lilyball

lilyball

feature-request
Comment Icon3

Problem In Yew 0.18, since properties were stored in the component, it was trivial to compare the old properties to the new ones in the change() lifecycle method. In Yew 0.19 this is no longer possible, as the properties are now stored in Context and were already updated by the time changed() is called. It looks like the only way I can do this is to copy the properties back into the model object after comparing them in changed().

I need this because I'm trying to determine whether to overwrite potential user changes to editable fields and to do that I need to check if individual relevant properties changed rather than the whole struct. More generally, this would also help when deriving the component state from properties is expensive, so only the property fields that changed need to be applied to the state.

Expected behavior A simple solution would be to swap the old properties with the new ones instead of overwriting them and then pass the old properties as a new argument to changed(). This way I can easily compare them. This is of course a breaking change.

Environment:

  • Yew version: 0.19.3

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
WorldSEnder

WorldSEnder

bug
Comment Icon0

Problem

A variation of the issue @futursolo raised in https://github.com/yewstack/yew/pull/2705#discussion_r883513922 exists in 0.19.3. A difference is that the vtag reconciliation works off a pre-existing tag instead of next_sibling, but forcing yew to add a second tag breaks it in the same way. Is it important enough to backport?

Steps To Reproduce

https://gist.github.com/WorldSEnder/5d7ffb17f99883ca5ccc98cd6060ee4f

Wait a second, it will trigger the panic after a short timeout.

Expected behavior

Normal reconciliation, replacing the Nested nodes with the new list.

To be clear, shifting elements and modifying the dom is not the correct solution here. It will cause similar focus issues as in #2704. All that needs to be done is to adjust the next_sibling of nested components. Perhaps a component could pass down a NodeRef and just .link() the next_sibling it gets passed in to update it for all children automatically.

Screenshots

panicked at 'failed to insert tag before next sibling: JsValue(NotFoundError: Node.insertBefore: Child to insert before is not a child of this node

Environment:

  • Yew version:[0.19.3]

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
futursolo

futursolo

A-yew
Comment Icon1

Currently, prepared states are implemented with bincode + base64. This implementation is selected as it results in the smallest artifact of both hydration enabled wasm file and html file.

However, sometimes it may make sense to swap this for another serde implementation such as when serde_json is already included. We should provide a way to replace the implementation.

wdcocq

wdcocq

documentation
Comment Icon4

Problem Hydration fails when SSR outputs a <table> without a <tbody> tag. The browser will insert a <tbody> and thus SSR and CSR are not in sync. Not sure if there are other instances where the browser cleans up the markup?

A simple workaround is to add a <tbody> in the SSR output

Expected behavior No hydration panic. Not sure how this should be done..

Environment:

  • Yew version: master
  • Rust version: 1.60.0
  • Browser: firefox 100.0

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
futursolo

futursolo

feature-request
Comment Icon1

This issue outlines a proposal to add a set of hooks that can be used to carry states / artifacts created during the server-side rendering to the client side for hydration and subsequent rendering and a new crate that links a state to the server.

yew

These hooks are usually not used by end-users but:

  • http clients (or other data fetching clients)
  • state management libraries
  • yew-router
  • css-in-rust libraries

use_prepared_state

usage:

This hook executes an async closure that creates a state from deps and returns a SuspensionResult<Option<Rc<ReturnType>>>.

(I am aware that async closure is not stable, but proc macro can rewrite it. We need to extract the return type from the closure for client side rendering as the closure itself is not present in the client side bundle.)

Both the return type and deps are sent to client-side with serde. (I am currently leaning towards bincode as its smaller than serde_json and used by yew-agent.)

During client-side rendering hydration, it will return Ok(None) if:

  1. The component is not hydrated.
  2. The deps passed during the hydration do not match deps associated with the server-side rendered result.

The deps is needed so that if the deps used to generate state changes it can automatically invalidate the server-side rendered state.

State SSR CSR
Loading Err(Suspension) Err(Suspension)
Loaded (SSR) Ok(Some(Rc<ReturnType>)) -
Loaded (CSR, deps == server_side_deps) - Ok(Some(Rc<ReturnType>))
Loaded (CSR, deps != server_side_deps) - Ok(None)

This is a macro-based hook so that the content inside the closure can be stripped from client side rendering bundle automatically.

This can be used to collect a state created during the server-side rendering and ensures that during the hydration, the application will receive the same value.

use_transitive_state

Similar to use_prepared_state, but the closure is run after the server-side rendering of current component is finished but before destroy (effect stage). During server-side rendering, the component never sees the state (always return Ok(None)).

This is used to carry cache of an http client or states for a state management library so that they can collect all states created during the server-side rendering to be sent to the client side for hydration after its content is created.

State SSR CSR
Loading - Err(Suspension)
Loaded (CSR, deps == server_side_deps) - Ok(Some(Rc<ReturnType>))
Loaded (CSR, deps != server_side_deps) - Ok(None)

yew-router

getServerSideProps in Next.js is opinionated about the server environment (node or edge), protocol and requires an http client.

I wish a client agnostic, protocol agnostic getServerSideProps that is available in all supported rust platform can be established here. However, we may provide a reference implementation about how it is handled. (e.g.: tower service + gloo-net + bincode)

StatefulRoutable

A StatefulRoutable trait is added:

Users can then implement a server that sends the route state to the client side.

We can also provide a tower service to help users to implement an endpoint.

StatefulSwitch

A stateful routable is combined with a StatefulSwitch (should be declared inside a ):

Caveats

In this implementation, for all StatefulRoutable variants, the State type is shared.

However, it may be better to map each Routable variant to a different state type. i.e.: Route::MyAccount -> MyAccountState, Route::Article -> ArticleState

I am not sure whether this is possible with current Rust typing system.

WorldSEnder

WorldSEnder

ergonomics
Comment Icon3

Problem The feature soundness lints are useful but clippy is not very helpful when determining the correct visibilities and features. At least sometimes I don't understand immediately why clippy is allowing some things but not others. Take for example this clippy run. It complains about a function that is apparently never used, but it is used, just in a module that happens to have a cfg(any(feature = "csr", feature = "ssr")) annotation somewhere further up in the module hierarchy. It's a pain to figure that out, since the tooling doesn't help much in reasoning why the function is unused.

Expected behavior A clear module tree and feature dependencies. When searching cfg(feature, I get 168 results across the code base. That's too many to reasonably figure out which impact what part.

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
felixwatts

felixwatts

bug
Comment Icon2

Problem This setup causes a panic:

The following is printed in the JS console:

I understand this is not a good place to be setting state and I don't actually do this, but mention it anyway as it's a panic.

Environment:

  • Yew version: 0.19.3
  • Rust version: nightly
  • Target, if relevant: wasm32-unknown-unknown
  • Build tool, if relevant: trunk
  • OS, if relevant: Ubuntu
  • Browser and version, if relevant: Brave 1.37.116

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
Versions

Find the latest versions by id

yew-v0.19.3 - Dec 11, 2021

Changelog

yew-router-v0.16.0 - Dec 11, 2021

Changelog

yew-agent-v0.1.0 - Dec 11, 2021

Changelog

0.18.0 - May 16, 2021

Changelog

0.17.4 - Oct 25, 2020

Changelog

  • 🛠 Fixes

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

0.17.3 - Oct 25, 2020

Changelog

  • ⚡️ Features

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

0.17.2 - Jul 04, 2020

Changelog

  • ⚡️ Features

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

0.17.1 - Jul 01, 2020

Changelog

  • 🛠 Fixes

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

0.17.0 - Jun 29, 2020

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 @{..}:

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

0.16.2 - May 14, 2020

Changelog

  • 🛠 Fixes

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

0.16.1 - May 14, 2020

Changelog

0.16.0 - May 09, 2020

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:

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

0.15.0 - Apr 25, 2020

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:

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]

0.14.3 - Apr 04, 2020

🛠 Fixes

0.14.2 - Mar 23, 2020

🛠 Fixes

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

0.14.1 - Mar 14, 2020

🛠 Fixes

  • Connected message was only called for first bridge creation. [@nicklaswj, #1029]

0.14.0 - Mar 14, 2020

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

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

0.13.2 - Mar 07, 2020

  • 🛠 Fixes

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

0.13.1 - Mar 04, 2020

🛠 Fixes

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

0.13.0 - Mar 01, 2020

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.

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]

0.12.0 - Feb 16, 2020

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

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

0.11.0 - Jan 06, 2020

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:

After:

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

and

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:

After:

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]

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

  • 🛠 Fixes

    • Fixed handling of boolean tag attributes. [@mrh0057, #840]

    • Improved nested component ergonomics. [@jstarry, #780]

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

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

0.10.0 - Nov 11, 2019

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]

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

      After:

    • Removed the Transferable trait since it did no more than extend the serde Serialize and Deserialize traits. [@hgzimmerman, #319]

      Before:

      After:

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

0.9.2 - Oct 13, 2019

Fixed yew-macro dependency version

0.9.1 - Oct 13, 2019

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]

0.9.0 - Sep 27, 2019

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]

    • Iterators can now be rendered in the html! macro without using the for keyword. [@hgzimmerman, #622]

      Before:

      After:

    • 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

0.8.0 - Aug 10, 2019

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.

    • Callback props no longer transform into Option types [@jstarry, #553]

      before:

      after: note the #[props(required)] attribute

0.7.0 - Jul 19, 2019

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.

  • ⚡️ Features

    • html!{} is now valid syntax and can be used to render nothing [[@jstarry], #500]
    • Apps can now be built without cargo-web using wasm-bindgen [[@jstarry], #497]
    • Callback now implements Debug [[@DenisKolodin], #485]
    • New utility method for getting the host of the current page [[@DenisKolodin], #509]
  • 🛠 Fixes

    • html! - Commas are no longer necessary for splitting up attributes [[@jstarry], #500]
    • html! - Colons are no longer necessary for denoting a Component 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]

0.6.0 - Aug 10, 2019

  • ⚡️ Features

    • 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 a ChangeData::Files variant for the onchange handler [[@DenisKolodin], #464]
    • Added ReaderService to read data from File instances. [[@DenisKolodin], #464, #468]
  • 🛠 Fixes

    • It was impossible to set value attribute for any tag instead of option, because it used inner value of VTag to keep the value for input element. Now value attribute works for options, progress tags, etc.
  • 🔮 Examples

    • New example file_upload that prints sizes of uploaded files [[@DenisKolodin], #464]

0.5.0 - Aug 10, 2019

🎶 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.

  • ⚡️ Features

    • Introduced the concept of an Agent which can run processes in other contexts:
      • Context agent spawns once per thread
      • Job agent spawns for every bridge
      • Public 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 a send_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 setting Credentials of fetch request.
    • FetchService aborts requests using AbortController.
    • Added SubmitEvent with onsubmit rule.
  • 🛠 Fixes

    • Bug with emscripten target RuntimeError: index out of bounds fixed with a new scheduler [[@DenisKolodin], #272]
  • 🚨 Breaking changes

    • send_back method requires a mutable reference to self. This was added to prevent creating callbacks in view implementations. [[@DenisKolodin], #367]
    • Context requirement removed. It's no longer necessary to use Component<CTX> type parameter. Instead, a link to the environment is provided with the Component::create call. [[@DenisKolodin], #272]

Information - Updated Aug 17, 2022

Stars: 23.1K
Forks: 1.1K
Issues: 98

Repositories & Extras

A Rust/WASM Library to interact with Bitcoin SV

npm i bsv-wasm-bundler --save

A Rust/WASM Library to interact with Bitcoin SV

WASM / Rust / D3 example

Fetch data with Rust + WASM and show it with JS + D3

WASM / Rust / D3 example

@texhno-rust-wasm-game-of-life

A template for kick starting a Rust and WebAssembly project using Tutorial

@texhno-rust-wasm-game-of-life

rust wasm worker hello world

Built using the template at which

rust wasm worker hello world

Rust WASM Web Worker Examples

This repository contains four different examples of using web workers in conjunction with WASM in

Rust WASM Web Worker Examples

rust-wasm-mandelbrot

WebAssembly でマンデルブロ集合を描きます

rust-wasm-mandelbrot

conway_rust_wasm

Conway's Game of Life with Rust and Web Assembly

conway_rust_wasm

Rust-Wasm-Game-of-Life

A fast and efficient Conway's Game of Life simulation made with Rust &amp; compiled for the web

Rust-Wasm-Game-of-Life
Facebook Instagram Twitter GitHub Dribbble
Privacy