Add skipBubbling property to dispatch config

[lunaleaps]

Support skip bubbling for React Native bubbled events.

Introducing this to offer similar event dispatching for event behavior on the web. In particular, there are some events that we want to support in React Native that do not bubble. These are not synonymous with direct events on React Native as they still go through a capture phase.

How did you test this change?

Added a test case to demonstrate that ancestors do not receive bubbled events when skipBubbling is true

[sizebot]

Comparing: 5d08a24...51f9345

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	131.32 kB	131.32 kB	=	42.01 kB	42.01 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	136.15 kB	136.15 kB	=	43.43 kB	43.43 kB
facebook-www/ReactDOM-prod.classic.js	=	434.32 kB	434.32 kB	=	79.42 kB	79.42 kB
facebook-www/ReactDOM-prod.modern.js	=	421.06 kB	421.06 kB	=	77.41 kB	77.41 kB
facebook-www/ReactDOMForked-prod.classic.js	=	434.32 kB	434.32 kB	=	79.42 kB	79.42 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
react-native/shims/ReactNativeViewConfigRegistry.js	+0.87%	3.57 kB	3.60 kB	+1.23%	1.22 kB	1.23 kB
react-native/shims/ReactNativeTypes.js	+0.43%	7.16 kB	7.19 kB	+0.40%	2.00 kB	2.01 kB
react-native/implementations/ReactFabric-prod.js	+0.22%	274.55 kB	275.15 kB	+0.15%	49.49 kB	49.57 kB
react-native/implementations/ReactNativeRenderer-prod.js	+0.21%	283.17 kB	283.78 kB	+0.14%	51.06 kB	51.13 kB
react-native/implementations/ReactFabric-prod.fb.js	+0.21%	286.03 kB	286.63 kB	+0.17%	51.65 kB	51.74 kB
react-native/implementations/ReactNativeRenderer-prod.fb.js	+0.21%	289.98 kB	290.59 kB	+0.13%	52.54 kB	52.61 kB
react-native/implementations/ReactFabric-profiling.js	+0.21%	293.54 kB	294.15 kB	+0.15%	52.67 kB	52.75 kB

Generated by 🚫 dangerJS against 51f9345

[yungsters]

This type implies the possibility of a nonsensical value:

phasedRegistrationNames: {
  captured: 'onFooCapture',
  bubbled: 'onFooWhateverIFeelLike', // Not actually used, so why does it matter?
  skipBubbling: true,
},

Could you have accomplished the same by making bubbled nullable?

Suggested change

	phasedRegistrationNames: $ReadOnly<{|
	captured: string,
	bubbled: string,
	skipBubbling?: ?boolean,
	|}>,
	phasedRegistrationNames: $ReadOnly<{|
	captured: string,
	bubbled: null | string,
	|}>,

[lunaleaps]

Yea I thought about this but we still need a way to define what the bubbled event listener name is. Because even if we don't bubble, we still need to dispatch that listener on the target. Unless we can infer the name of event by the captured listener?

[lunaleaps]

I guess clarification -- the bubbled listener is still dispatched on the target even if the event is non-bubbling

[yungsters]

Ahh, right. This really reveals how terrible the current event config is at describing the events, heh. Thanks for the explanation.

[rickhanlonii]

I may be missing some previous discussions on this, but what do we think about calling this bubbles to bring it in line with the name used on the Web for custom events?

Long term, the event config could match even closer to the Web spec for dispatching custom events, something like:

{
  type: string,
  bubbles: boolean,
  
  // Not in web spec, but could be implemented in React.
  captures: boolean,
}

Which would turn this:

{
  bubblingEventTypes: {
    topDefaultBubblingEvent: {
      phasedRegistrationNames: {
        captured: 'onDefaultBubblingEventCapture',
        bubbled: 'onDefaultBubblingEvent',
      },
    },
  }
  directEventTypes: {
    topDirectEvent: {
       registrationName: 'onDirectEvent',
    },
  }
}

Into this:

[
  {
    // Bubbling phase is onDefaultBubblingEvent
    // Capture phase is onDefaultBubblingEventCapture
    // Top is topDefaultBubblingEvent
    // Captures and bubbles
    type: 'DefaultBubblingEvent',
    bubbles: true,
    captures: true,
  },
  {
    // Direct event name is onDirectEvent, no capture, no bubble.
    type: 'DirectEvent',
    bubbles: false,
    captures: false,
  }
]

Notice that there's only one config (instead of bubbling vs direct), and all of the event names like top*, on*, and on*Capture are automatically derived from the event type, similar to what we do in React DOM with things like onClick and onClickCapture.

[yungsters]

Looks good to me. Thanks again.

[yungsters]

Can use ?. here?

[yungsters]

Ahh, right. This really reveals how terrible the current event config is at describing the events, heh. Thanks for the explanation.

[lunaleaps]

cc @rickhanlonii, @gaearon could I get your guys' thoughts on this?

[lunaleaps]

Ah I can't do optional chaining here: https://app.circleci.com/pipelines/github/facebook/react/24800/workflows/e1e0cb3c-f7c3-490a-9f14-5927e89e2970/jobs/451173?invite=true#step-104-24

Will revert that change and then merge

[ShikaSD]

@lunaleaps seems like this property name is (accidentally?) different here, flow check during React sync caught this

[lunaleaps]

Oh my mistake! How should I address? Can we fix forward on the sync?

[lunaleaps]

Submitting a fix now: #24109 -- waiting for tests to pass. If anyone knows what I should've run to check this .. let me know!