You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As I recently found out while writing a wrapper for Material Web Components, consuming web components in yew is far from an ergonomic and pleasant experience.
Problems I ran into
Note: all of these problems are not strictly related to Yew but I'm mentioning them in case someone else finds themselves stuck.
Importing the component is very cumbersome (Unrelated to Yew)
Passing and receiving values is a hassle at best (Unrelated to Yew)
Edit:
Updated to be used for tracking when all pain points identified are resolved :)
Details/proposed solutions
Importing the component is very cumbersome (Unrelated to Yew)
wasm-bindgen does this weird thing that when if the imported JS isn't used, it doesn't include in the binary. This becomes in a problem when all the JS needs to do is be imported to perform its function i.e. load the web component. This hack is required to have components to load (ranile/material-yew#1). This is non-optimal but there is nothing Yew can do about it.
Custom events
Yew should allow users to listen to custom events as well and pass CustomEvent to the callback.
There should be a way to deal with names like the ones used here. It can be a function on NodeRef or special syntax in html!, not 100% sure on the API.
Inability to use type attribute
The type attribute isn't set anything other than input and button elements. Currently, there is no error or any indication of what's wrong. Neither is this behavior documented. The mostly became an issue with mwc-textfield, mwc-textfield and mwc-drawer.
The type attribute should be set or at least it should raise an error if used in (currently) illegal places until it can be used be everywhere.
Inability to listen to change event
Passing onchange where its not allowed results in a panic: panicked at 'only an InputElement, TextAreaElement or SelectElement can have an onchange event listener'. This should be allowed.
Difficult/impossible to set properties on elements
Covered by #1322. This becomes especially apparent when it is required to set the property instead of attribute.
Standard attributes can't be optional
This issue comes up with the current implementation of optional attributes. This might be superseded by implementation, of #1550, not sure.
Passing and receiving values is a hassle at best (Unrelated to Yew)
This originates from converting values to and from JsValue. There were 2 big obstacles that I encountered:
Firstly, it was impossible to export structs and let web_sys handle this. More details here: rustwasm/wasm-bindgen#2322.
Secondly, closures were a pain to deal with, especially with signatures. For example, valitidyTransfromtextfield validation. I solved this by creating a JS type, wrapping a Rust struct around it and parsing the JsValue provided by the web component.
Finally, I'd like to thank @siku2 for their help with this. Without their help, I would not have been to get any of this work.
The text was updated successfully, but these errors were encountered:
As I recently found out while writing a wrapper for Material Web Components, consuming web components in yew is far from an ergonomic and pleasant experience.
Problems I ran into
Note: all of these problems are not strictly related to Yew but I'm mentioning them in case someone else finds themselves stuck.
type
attributeonchange
listener can't be on any element other than input textare or select #1776Edit:
Updated to be used for tracking when all pain points identified are resolved :)
Details/proposed solutions
Importing the component is very cumbersome (Unrelated to Yew)
wasm-bindgen
does this weird thing that when if the imported JS isn't used, it doesn't include in the binary. This becomes in a problem when all the JS needs to do is be imported to perform its function i.e. load the web component. This hack is required to have components to load (ranile/material-yew#1). This is non-optimal but there is nothing Yew can do about it.Custom events
Yew should allow users to listen to custom events as well and pass
CustomEvent
to the callback.There should be a way to deal with names like the ones used here. It can be a function on
NodeRef
or special syntax inhtml!
, not 100% sure on the API.Inability to use
type
attributeThe
type
attribute isn't set anything other than input and button elements. Currently, there is no error or any indication of what's wrong. Neither is this behavior documented. The mostly became an issue withmwc-textfield
,mwc-textfield
andmwc-drawer
.The
type
attribute should be set or at least it should raise an error if used in (currently) illegal places until it can be used be everywhere.Inability to listen to
change
eventPassing
onchange
where its not allowed results in a panic:panicked at 'only an InputElement, TextAreaElement or SelectElement can have an onchange event listener'
. This should be allowed.Difficult/impossible to set properties on elements
Covered by #1322. This becomes especially apparent when it is required to set the property instead of attribute.
Standard attributes can't be optional
This issue comes up with the current implementation of optional attributes. This might be superseded by implementation, of #1550, not sure.
Passing and receiving values is a hassle at best (Unrelated to Yew)
This originates from converting values to and from
JsValue
. There were 2 big obstacles that I encountered:Firstly, it was impossible to export structs and let
web_sys
handle this. More details here: rustwasm/wasm-bindgen#2322.Secondly, closures were a pain to deal with, especially with signatures. For example,
valitidyTransfrom
textfield
validation. I solved this by creating a JS type, wrapping a Rust struct around it and parsing theJsValue
provided by the web component.Finally, I'd like to thank @siku2 for their help with this. Without their help, I would not have been to get any of this work.
The text was updated successfully, but these errors were encountered: