[react-interactions] Add experimental ReactDOM Listener API #17508
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
trueadm
requested review from
threepointone,
bvaughn,
sebmarkbage,
necolas,
gaearon,
lunaruan and
acdlite
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit e33346d:
|
Details of bundled changes.Comparing: acfe4b2...e33346d react-noop-renderer
react-dom
react-reconciler
react-art
react-test-renderer
react-native-renderer
ReactDOM: size: 🔺+0.1%, gzip: -0.0% Size changes (stable) |
Details of bundled changes.Comparing: acfe4b2...e33346d react-dom
react-test-renderer
react-native-renderer
react-noop-renderer
react-art
react-reconciler
ReactDOM: size: 0.0%, gzip: 0.0% Size changes (experimental) |
trueadm
force-pushed
the
create-listener-api
branch
6 times, most recently
from
08ab510 to
6d20886
Compare
necolas
reviewed
Dec 4, 2019
There was a problem hiding this comment.
Something to note: I've come to really appreciated the documentation and ascii diagrams contained in the ResponderEventPlugin. It's really helpful to get an overview of how a system is designed before reading through the code.
react/packages/legacy-events/ResponderEventPlugin.js
Lines 205 to 282 in ab1a4f2
packages/react-dom/src/events/__tests__/DOMEventListenerSystem-test-internal.js
Outdated
Show resolved
Hide resolved
packages/react-dom/src/events/__tests__/DOMEventListenerSystem-test-internal.js
Outdated
Show resolved
Hide resolved
packages/react-dom/src/events/__tests__/DOMEventListenerSystem-test-internal.js
Outdated
Show resolved
Hide resolved
packages/react-dom/src/events/__tests__/DOMEventListenerSystem-test-internal.js
Outdated
Show resolved
Hide resolved
trueadm
force-pushed
the
create-listener-api
branch
12 times, most recently
from
f273405 to
12098ff
Compare
trueadm
force-pushed
the
create-listener-api
branch
from
12098ff to
931d40e
Compare
More features More features More features More features More features add file add file WIP WIP FIX WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP Cleanup Cleanup Address feedback and refactor some logic Address feedback Fix conflict Fix renderers Remove comment Fix custom renderer Fix Revert flag Revert flag Propagation clean up Propagation clean up Used named import
trueadm
force-pushed
the
create-listener-api
branch
from
931d40e to
e33346d
Compare
|
This is really cool. Forgive me if this is super obvious, but is there a going to be a way to dispatch custom events? Use case would be sharing a listener with complex inputs (like react-select, draftjs, etc.) const inputLogger = unstable_createListener('change', (eventOrValue) => {
if (isEvent(eventOrValue) {
console.log(eventOrValue.target.value)
} else {
console.log(value)
}
} |
|
@jaredpalmer I'm a bit confused by your example? This API binds around the native browser event, so you'd always get back the native browser event. You can capture custom native events too, but you'd have to dispatch those via the DOM for the event system to pick it up. If you wanted something like your example above, you'd likely have to add another layer on top of the Listener API rather than consuming it directly; then you can pass around any value you want. |
|
@trueadm got it. that makes sense. |
ayoubME
approved these changes
Dec 17, 2019
|
I'm closing this PR. We might want to re-visit this approach again in the future, but there are so many conflicts that it's probably better to start again (plus there are fundamental flaws in some aspects of this PR's design). For a look an alternative approach we're thinking of, see: #17651. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds the experimental Listener API to React behind a flag. Note: For now this is only intended to be used internally at Facebook, and we have no initial plans to ship this to open source.
The listener API includes its own React event system that leverages the lessons learned from the existing event system and that of the experimental React Flare event system. There are three new APIs that are added to
react-dom:ReactDOM.unstable_createListenerReactDOM.unstable_createRootListenerReactDOM.unstable_addEventPriorityThe Listener API works in a similar way to the DOM's
addEventListenerAPI, except this API returns a special React Listener object that can be supplied to elements via the internallistenersprop. An example of this follows:Listener Options
Both the
createListenerandcreateRootListenerAPIs support an optional third argument for specifying listener options. There are two boolean options that can be specified,captureandpassive. Here's an example to demonstrate this:Root Listeners
Sometimes, it's ideal to attach listeners to the root document of an app, so events can be captured that don't hit a specific target element. For these cases, the
createRootListenerAPI can be used:Combining multiple listeners
Elements support having multiple listeners, even of the same type on an element, to do this, arrays can be used (and nested) to supply many listeners. Listeners of the same type will execute in array order of how they're supplied to the element:
Event Object
Unlike the existing React event system, the Listener API supplies only the native object to event callbacks – there are no Synthetic Events. The only caveat is that the native objects get monkey-patched by React, with several of the properties and methods on the event object replaced with alternatives that interface with React's event delegation and propagation system. Calling
stopPropagationon the monkey-patched event object will not trigger the nativestopPropagationmethod (unlike the existing React event system, which does), but rather prevent propagation through React's propagation system only.Event Flushing
With the Listener API, we don't flush on the native event triggering unless we have React Listeners that are actually triggered, this should help reduce needlessly flushing work when the event has no actual action.
This PR depends on #17513