Comments (13)
I think these field names are based on the DOM event names themselves: input
for <input>
and <textarea>
and change
for <select>
. While that doesn't make it less confusing, it's at least consistent with the DOM naming scheme. I do think documenting the connection to the DOM events for these fields would help, at the very least.
from reflex-dom.
@spl If that's the case, it still seem strange because all those elements have both of those events.
from reflex-dom.
@mightybyte No argument there. I'm guessing these options were chosen for their immediate/common usefulness rather than trying to support all available event types, since they are not all equally useful.
Of course, it would be nice to easily use any DOM event on any widget. I've run into this problem myself.
from reflex-dom.
Yeah. I'm playing with some different ideas for building widget infrastructure in the reflex-dom-contrib package. I'm currently just building on top of reflex-dom widgets, but I certainly don't have to. If you want to play with API ideas for supporting all DOM event types, I'll definitely accept those changes in that repo. To start with you should probably make a separate module to avoid breaking backwards compatibility, but eventually we can merge all these ideas together.
from reflex-dom.
@mightybyte I looked at it briefly, and it looks nice! I did borrow the useful widgetHoldHelper
from reflex-dom-contrib
.
As for the input widgets, I've found that it's important to be careful about the source and flow of events to avoid cycles. For example, use _dropdown_change
instead of _dropdown_value
.
It would be nice if all widgets naturally didn't allow for event cycles. That is, I'd like the value of the input when it actually changes in the DOM, and whether that change be due to a programmatic update or a user input shouldn't matter, but my program shouldn't loop infinitely if I tie the widget's value
(indirectly) to the widget's setEvent
. I'm not sure if that is possible, but I'd naively like to think so.
from reflex-dom.
It is possible to automatically stop the loop using value equality - e.g.
using nubDyn
. However it's a bit hacky, what if the user sets the value
twice to the same thing (you might want to know about that)? Maybe better
would be some kind of loop-detection error in the core when you stuff
things up.
I also started working on this previously and I think we can avoid a lot of
boilerplate by not using so many data types. Just like @mightybyte's
reflex-dom-contrib
I think we can get away with using just one data type
most of the time, they're pretty much all have a value which can be changed
by a user, or progmatically and have a value of some type.
Btw. @mightybyte - does the cool switchable widget trick work over the new
event fan?
FWIW here was my attempt:
https://github.com/Saulzar/reflex-html/blob/apphost/src/Reflex/Html/Input.hs
On Wed, Sep 2, 2015 at 6:07 PM, Sean Leather [email protected]
wrote:
@mightybyte https://github.com/mightybyte I looked at it briefly, and
it looks nice! I did borrow the useful widgetHoldHelper from
reflex-dom-contrib.As for the input widgets, I've found that it's important to be careful
about the source and flow of events to avoid cycles. For example, use
_dropdown_change instead of _dropdown_value.It would be nice if all widgets naturally didn't allow for event cycles.
That is, I'd like the value of the input when it actually changes in the
DOM, and whether that change be due to a programmatic update or a user
input shouldn't matter, but my program shouldn't loop infinitely if I tie
the widget's value (indirectly) to the widget's setEvent. I'm not sure if
that is possible, but I'd naively like to think so.—
Reply to this email directly or view it on GitHub
#22 (comment)
.
from reflex-dom.
@Saulzar I'm not sure how to stop the loop using nubDyn
. My naive impression was that the problems were due to event trigger cycles, which happened regardless of the value of the event. But I'd love to understand better how cycles happen and how to detect what is causing them.
Also, wrt the ideas about input widgets, I think it is useful to keep in mind that the DOM event types are not a closed world. New event types can be created and handled. I've seen some JQuery-based libraries that do this. From that perspective, it would be nice if one could easily register a Reflex-based event handler for an arbitrary DOM event. I did this, but it required a massive hack using a GHCJS JQuery wrapper to listen for the event and call a Reflex handler. (This was challenging because (1) ghcjs-dom
functions didn't do anything in response to the event – even though I could add a listener in JS – and (2) ghcjs-jquery
didn't work for me – see ghcjs/ghcjs-jquery#10.)
from reflex-dom.
Actually no - you're right. I think there's nothing you can do if you have
a direct cycle! Then runtime could possibly detect a cycle however, and
give an error - that should be possible, since Events should never fire
twice in the same frame.
You should be able to make a wrapper to register a listener for arbitrary
events (by name?), it's just a callback handler from JS after all right?
Even if there isn't a simple function to do it right now (fully agree it
should be simple). It should exist somewhere on the Element
API though -
where the rest of the event types are.
I'm not really familiar with jquery at all, so I have no idea how that
relates - maybe one of the more web-developer-y kinds around here knows
something :)
On Wed, Sep 2, 2015 at 9:25 PM, Sean Leather [email protected]
wrote:
@Saulzar https://github.com/Saulzar I'm not sure how to stop the loop
using nubDyn. My naive impression was that the problems were due to event
trigger cycles, which happened regardless of the value of the event. But
I'd love to understand better how cycles happen and how to detect what is
causing them.Also, wrt the ideas about input widgets, I think it is useful to keep in
mind that the DOM event types are not a closed world. New event types can
be created and handled. I've seen some JQuery-based libraries that do this.
From that perspective, it would be nice if one could easily register a
Reflex-based event handler for an arbitrary DOM event. I did this, but it
required a massive hack using a GHCJS JQuery wrapper to listen for the
event and call a Reflex handler. (This was challenging because (1)
ghcjs-dom functions didn't do anything in response to the event – even
though I could add a listener in JS – and (2) ghcjs-jquery didn't work
for me – see ghcjs/ghcjs-jquery#10
ghcjs/ghcjs-jquery#10.)—
Reply to this email directly or view it on GitHub
#22 (comment)
.
from reflex-dom.
It should exist somewhere on the
Element
API though - where the rest of the event types are.
It does, and it didn't work. ;)
from reflex-dom.
I'm not really familiar with jquery at all, so I have no idea how that relates - maybe one of the more web-developer-y kinds around here knows something :)
Just to clarify, what I'm describing is not a JQuery-specific thing. You can trigger and listen to arbitrarily-named event types in plain old JavaScript. It's just that I observed it happening in JQuery libraries.
from reflex-dom.
Thinking it's probably something to do with the way the JS lib is loaded -
GHCJS.DOM is a pretty thin wrapper, it's not like it does any actual event
processing itself.
As always - feel free to provide a small example which doesn't work :)
On Wed, Sep 2, 2015 at 10:22 PM, Sean Leather [email protected]
wrote:
I'm not really familiar with jquery at all, so I have no idea how that
relates - maybe one of the more web-developer-y kinds around here knows
something :)Just to clarify, what I'm describing is not a JQuery-specific thing. You
can trigger and listen to arbitrarily-named event types in plain old
JavaScript. It's just that I observed it happening in JQuery libraries.—
Reply to this email directly or view it on GitHub
#22 (comment)
.
from reflex-dom.
@spl Yes, the _change events are a very important tool for eliminating event loops. There are ways to do it without them, but using them can make things quite a bit simpler.
@Saulzar I haven't tried the switchable widget with fan, so I'm not sure.
from reflex-dom.
Hi everyone,
This has been an interesting discussion to follow! A lot of valid concerns have been raised, and I hope to be able to address them soon.
Regarding non-custom DOM events, I've begun putting in place a system that allows us to support all of them, without paying for the ones we don't use: https://github.com/ryantrinkle/reflex-dom/blob/master/src/Reflex/Dom/Widget/Basic.hs#L720 . This domEvent function allows you to say something like domEvent Click
to get the click event. I'll be applying this approach to other widgets soon, too, which I think will improve things.
The remaining issue with supporting all built-in DOM events is that it is not quite clear to me what should be marshaled for each DOM event type, and whether we can do it lazily to avoid making users who don't care about the details of common events pay for marshaling a bunch of extra metadata. I'd very much welcome suggestions on this.
Regarding cycles, I think that separation between change/input events and updated values will always be necessary to a degree - some logic does depend on whether the user made the change or the software made the change. (I completely agree, by the way, that having "change" and "input" be distinct is very confusing, but unfortunately it is the way the DOM works - the new uniform approach to events may actually make things worse in this regard, because "the wrong" event will now be available.) However, I would be very supportive of any concrete proposals that would decrease the chance of users running into cycles or improve debugging for ones that exist.
Regarding custom DOM events, I have not looked into this, but I'd be happy to hear suggestions on what this interface should look like from someone who has.
from reflex-dom.
Related Issues (20)
- Compiler error with Reflex.Dom.Prerender HOT 4
- Static renderer's handling of some config items is incorrect
- Collection widget content gets deleted on page load completion with ghcjs
- Why does DomRenderHook run in sync callback HOT 2
- inputElementConfig_initialValue doen't work after reload HOT 4
- Is MountableDomBuilder a deadcode
- Checked property doesn't work correctly for radio inputs HOT 1
- `inputElement` initial value does not show and `setValue` does not work for custom event HOT 2
- Building on Windows.
- Support multiple form data values to be associated with the same name
- Error building release.nix: bitbucket.org/wuzzeb/webdriver-utils/get/a8b1552... returns 404 HOT 3
- sortableList.hs example outdated
- How to set focus of an element HOT 6
- reflex-dom-core is not compatible with patch >= 0.0.5.0 HOT 2
- implement _*ElementConfig_setFocus HOT 1
- How to debug: jsaddle requests: 101 pending
- Support GHC 9.2.3
- play method of audio element HOT 2
- Missing HTTP headers get reported as the empty string
- Dropdown Map becomes empty only when deployed HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reflex-dom.