Skip to content

EventTarget-based event dispatching (#56427)#56427

Open
rubennorte wants to merge 1 commit intofacebook:mainfrom
rubennorte:export-D100462547
Open

EventTarget-based event dispatching (#56427)#56427
rubennorte wants to merge 1 commit intofacebook:mainfrom
rubennorte:export-D100462547

Conversation

@rubennorte
Copy link
Copy Markdown
Contributor

@rubennorte rubennorte commented Apr 13, 2026

Summary:

Changelog: [internal]

Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the enableNativeEventTargetEventDispatching
feature flag (defaults to off).

Changes

  • Add EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY hook to EventTarget,
    allowing subclasses to provide prop-based listeners at dispatch time.
    In invoke(), the prop listener is prepended to the addEventListener
    listeners and processed through the same loop (no duplication).
  • ReactNativeElement overrides this hook to look up handlers from
    canonical.currentProps using a reverse mapping from event names
    to prop names (built lazily from the view config in
    EventNameToPropName.js).
  • Add getCurrentProps helper in NodeInternals.js to encapsulate
    private React API access.
  • Conditionally extend ReadOnlyNode from EventTarget when the flag is
    enabled, making addEventListener/removeEventListener/dispatchEvent
    available on element refs.
  • Export setEventInitTimeStamp and dispatchTrustedEvent from
    ReactNativePrivateInterface for use by the React renderer.
  • Set up global RN$isNativeEventTargetEventDispatchingEnabled function
    for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:

  • Add integration tests for event dispatching (prop handlers,
    addEventListener, ordering, capture/bubble phases, timestamps) and
    responder system (grant, release, transfer, negotiation, capture).
  • Add event dispatching benchmark.

Differential Revision: D100462547

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 13, 2026
@meta-codesync
Copy link
Copy Markdown

meta-codesync bot commented Apr 13, 2026

@rubennorte has exported this pull request. If you are a Meta employee, you can view the originating Diff in D100462547.

@meta-codesync meta-codesync bot changed the title EventTarget-based event dispatching EventTarget-based event dispatching (#56427) Apr 13, 2026
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 13, 2026
Summary:

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 13, 2026
Summary:
Pull Request resolved: facebook#56427

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
@rubennorte rubennorte force-pushed the export-D100462547 branch 2 times, most recently from d7e3bdb to dbc0a97 Compare April 14, 2026 10:22
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 14, 2026
Summary:

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 14, 2026
Summary:
Pull Request resolved: facebook#56427

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 14, 2026
Summary:

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 14, 2026
Summary:

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 14, 2026
Summary:
Pull Request resolved: facebook#56427

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 14, 2026
Summary:
Pull Request resolved: facebook#56427

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
rubennorte added a commit to rubennorte/react-native that referenced this pull request Apr 14, 2026
Summary:

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
Summary:
Pull Request resolved: facebook#56427

Changelog: [internal]

## Context

React Native's event system currently dispatches events through a legacy
plugin-based system. This change sets up an experiment to migrate to
the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent),
which enables imperative event handling on refs and aligns with web standards.

The experiment is gated behind the `enableNativeEventTargetEventDispatching`
feature flag (defaults to off).

## Changes

- Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget,
  allowing subclasses to provide prop-based listeners at dispatch time.
  In `invoke()`, the prop listener is prepended to the addEventListener
  listeners and processed through the same loop (no duplication).
- ReactNativeElement overrides this hook to look up handlers from
  `canonical.currentProps` using a reverse mapping from event names
  to prop names (built lazily from the view config in
  `EventNameToPropName.js`).
- Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate
  private React API access.
- Conditionally extend ReadOnlyNode from EventTarget when the flag is
  enabled, making addEventListener/removeEventListener/dispatchEvent
  available on element refs.
- Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from
  `ReactNativePrivateInterface` for use by the React renderer.
- Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function
  for the React renderer to check the flag value.

Gated until the OSS renderer has been synced to OSS:
- Add integration tests for event dispatching (prop handlers,
  addEventListener, ordering, capture/bubble phases, timestamps) and
  responder system (grant, release, transfer, negotiation, capture).
- Add event dispatching benchmark.

Differential Revision: D100462547
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant