Add flow to SyntheticEvent by eps1lon · Pull Request #19564 · facebook/react

eps1lon · 2020-08-08T14:03:58Z

Summary

Type-check SyntheticEvent and unsound usage.

According to the types there were a lot of unnecessary guards against event._reactName being null. Removing all these checks does not fail any tests but produces unsound types. The origin of _reactName being null is

react/packages/react-dom/src/events/DOMPluginEventSystem.js

Line 1037 in 5bb80b8

topLevelEventsToReactNames.set(type, null);

Test Plan

CI green
add runtime test for _reactName === null?

codesandbox-ci · 2020-08-08T14:06:09Z

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

Sandbox	Source
React	Configuration

sizebot · 2020-08-08T14:09:17Z

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 6d4d97f

sizebot · 2020-08-08T14:09:47Z

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 6d4d97f

eps1lon · 2020-08-08T14:11:44Z

 ): void {
  const registrationName = event._reactName;
-  if (registrationName === undefined) {
+  if (registrationName === null) {


Right now this can never be true:

accumulateEnterLeaveListenersForEvent is called from accumulateEnterLeaveTwoPhaseListeners

accumulateEnterLeaveTwoPhaseListeners is called from EnterLeaveEventPlugin#extractEvents with synthetic events that are created from nativemouseover, pointerover, mouseout or pointerout

for these native events we have a statically defined _reactName in userBlockingPairsForSimpleEventPlugin

It might make sense to add an invariant or just cast it to a string with a hint to the current data flow.

I don't understand this change.

If it was previously sometimes undefined, then this changes behavior.

If it was previously sometimes null, then this changes behavior.

If it was neither, then this line can be removed, and the type can be made more strict.

Does that make sense?

I think maybe you're saying that the type is more loose but for this particular case, we only get a subtype? Can we codify that in types?

If it was previously sometimes undefined, then this changes behavior.

Not according to the flow types. Maybe there are still some files where SyntheticEvent is used that are uncovered?

If it was previously sometimes null, then this changes behavior.

It does change but there weren't any test so we're definitely missing some code coverage. This is what I meant with adding a test for reactName === null.

I think maybe you're saying that the type is more loose but for this particular case, we only get a subtype? Can we codify that in types?

Exactly. I'll try something like UnknownSyntheticEvent { reactName: null } and KnownSyntheticEvent { reactName: string } and see if we can get rid of some checks with earlier type checks.

My impression is that this branch has something to do with the createEventHandle API. But I might be wrong. It would be good to look in git for why it was added.

Can we codify that in types?

We can. One thing I noticed though is that new SyntheticEvent is not type safe at all. Flow seems to think that a generic object was created and doesn't actually type-check the properties at all: https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVAXAngBwKZgDKWAdhgBZ4YCWAxgKIBueZAKrgQLxgDeYATngCGtDADkhAWzwAuMAGcM-aiQDmYAL7ooAVxKjqcEkVIUqdJiwwAKAJS9UYMMGBgEBACZGA5BjBD5eWpVY0ERcSkCSkEAOjBHZ1cAAwpqeSSwLzx5MBI4P2pJHBg8aTIwJOIyShoGZjYODIAjHT9YRDdqGBgwEr8dHICgkLBqPww4CqqzWssG-AyhEiwEISwEwQwdfmNU+QBuVC1UF1zJvH5+OH4AGgqSPCRCOGkAMT0DIzsMnCumoSaMCwYAAVgM-JttiRBmBVCwLnQwHAmiC8KIwNh8P4SB5MnBsiRfP5RDohN1gbRKLQANYVPaLQLBEhlDDyVC0IyKMB6eRCKB4OYYOTTGoWeoYdhY7gPJ6mUV1Kx2Q7smBDEzVcwKsgAYVVgV4x1OFyu-EGOTwAA98KI8B52Zy-Lz+YLhXLNYLJVxco91TMxVZdUM7KggA

So right now any call to a function expecting ReactSyntheticEventType with new SyntheticEvent is not sound.

It would be good to look in git for why it was added.

991c3b8#diff-6b784480f6f3297c42bc2e6e46e6f943L829-R818

event.dispatchConfig.registrationName was undefined | string while reactName is assumed to be string (even though it was nullable and still is.

gaearon · 2020-08-13T19:47:52Z

  );
-  enter.target = toNode;
-  enter.relatedTarget = fromNode;
+  // flow thinks `enter` could be `null` at this point


We have to declare it as let enter: KnownReactSyntheticEvent | null because we later re-assign it to null conditionally:

react/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js

Lines 167 to 169 in 08dcda6

if (nativeTargetInst !== targetInst) {

enter = null;

}

I'm not familiar with flow so there might be a better alternative. The current statements seems sound to me. TypeScript is fine with it, but flow is not

You could have two variables. First one is not nullable and that’s where you initialise. Then you copy it to a second nullable one.

Took the liberty and flipped the assignment around. Instead of conditionally nulling we conditionally create the event. This means no more wasted work in the constructor.

Otherwise we'll end up with

let enter: SyntheticEvent | null = null; const enterEvent: SyntheticEvent = { reactName: 'mouseleave' } enterEvent.reactName = ''; enter = enterEvent

which looks odd. Or do you prefer that?

gaearon · 2020-08-19T13:13:13Z

-  // If we are not processing the first ancestor, then we
-  // should not process the same nativeEvent again, as we
+  // If we are processing the first ancestor, then we
+  // should process the same nativeEvent again, as we


This wording change makes the comment nonsensical. I'll reword.

gaearon · 2020-08-19T13:16:54Z

Thanks!

* Add flow to SyntheticEvent * Minimal implementation of known and unknown synthetic events * less casting * Update EnterLeaveEventPlugin.js Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

facebook-github-bot added the CLA Signed label Aug 8, 2020

eps1lon commented Aug 8, 2020

View reviewed changes

eps1lon force-pushed the test/null-react-name branch from 5bb80b8 to 5f8358c Compare August 13, 2020 18:06

eps1lon marked this pull request as ready for review August 13, 2020 18:13

Add flow to SyntheticEvent

6c016be

eps1lon force-pushed the test/null-react-name branch 2 times, most recently from d1b61e6 to e75f163 Compare August 13, 2020 19:27

Minimal implementation of known and unknown synthetic events

08dcda6

eps1lon force-pushed the test/null-react-name branch from e75f163 to 08dcda6 Compare August 13, 2020 19:34

gaearon reviewed Aug 13, 2020

View reviewed changes

less casting

359df2f

gaearon reviewed Aug 19, 2020

View reviewed changes

Update EnterLeaveEventPlugin.js

6d4d97f

gaearon merged commit 87b3e2d into facebook:master Aug 19, 2020

eps1lon deleted the test/null-react-name branch August 19, 2020 13:23

Conversation

eps1lon commented Aug 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Uh oh!

codesandbox-ci Bot commented Aug 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sizebot commented Aug 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size changes (stable)

Uh oh!

sizebot commented Aug 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size changes (experimental)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eps1lon Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eps1lon Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaearon Aug 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaearon commented Aug 19, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

eps1lon commented Aug 8, 2020 •

edited

Loading

codesandbox-ci Bot commented Aug 8, 2020 •

edited

Loading

sizebot commented Aug 8, 2020 •

edited

Loading

sizebot commented Aug 8, 2020 •

edited

Loading

eps1lon Aug 13, 2020 •

edited

Loading

eps1lon Aug 13, 2020 •

edited

Loading

gaearon Aug 19, 2020 •

edited

Loading