search

Yomguithereal / react-blessed

A react renderer for blessed.
MIT License
4.45k stars 177 forks source link

Implement react SyntheticEvent dispatch #98

Open visigoth opened 5 years ago

visigoth commented 5 years ago

Implementing react's SyntheticEvent dispatch algorithm and data types enables the use of a wide variety of react components. My personal motivation is react-hotkeys, which requires blur, focus, and key* events.

react-dom does this by mapping the react event names to native event subscriptions that are required to satisfy them. Then, react-dom pushes them through its event plugin hub, where plugins transform the native event to react events. The generated events then go through the capture and bubble phases.

This set of changes implements most of this in a simpler fashion. It would have been nice to simply steal react's events package, but it is still private.

This set of changes also copies react's SyntheticEvent data types as of 16.8.6.

With this change, the included example works.

Yomguithereal commented 5 years ago

Hello @visigoth. I am having trouble understanding the whole ramifications of what your PR adds. Can you just tell me 1. how you estimate adding those events may impact overall performance & 2. if your PR introduces breaking changes?

visigoth commented 5 years ago
  1. i don't think it would impact performance at all. the setup happens at instance creation time, and should happen at props update time (though it doesn't with this stack of commits yet). it is basically a mapping from native events delivered by screen to synthetic events required by react. it is also the same algorithm used by react-dom
  2. yes; i think onXYZ handlers will now always receive react synthetic events rather than blessed native events. the native event is attached to the synthetic event, so components would potentially need to change a little bit, but not too much.
visigoth commented 5 years ago

one other thing: this does break things because not all of the events are implemented. only keypress, focus, and blur. all the other events need appropriate entries, but they are not difficult to add.