Create module to handle event handler attributes #48920
Closed
Conversation
This file contains hidden or 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
facebook-github-bot
added
CLA Signed
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D67839560 |
rubennorte
force-pushed
the
export-D67839560
branch
from
ffe12fd to
d986892
Compare
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 24, 2025
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.:
```
import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes';
class EventTargetSubclass extends EventTarget {
get oncustomevent(): EventListener | null {
return getEventHandlerAttribute(this, 'customEvent');
}
set oncustomevent(listener: EventListener | null) {
setEventHandlerAttribute(this, 'customEvent', listener);
}
}
const eventTargetInstance = new EventTargetSubclass();
eventTargetInstance.oncustomevent = (event: Event) => {
console.log('custom event received');
};
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Logs 'custom event received' to the console.
eventTargetInstance.oncustomevent = null;
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Does not log anything to the console.
```
Differential Revision: D67839560
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 24, 2025
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.:
```
import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes';
class EventTargetSubclass extends EventTarget {
get oncustomevent(): EventListener | null {
return getEventHandlerAttribute(this, 'customEvent');
}
set oncustomevent(listener: EventListener | null) {
setEventHandlerAttribute(this, 'customEvent', listener);
}
}
const eventTargetInstance = new EventTargetSubclass();
eventTargetInstance.oncustomevent = (event: Event) => {
console.log('custom event received');
};
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Logs 'custom event received' to the console.
eventTargetInstance.oncustomevent = null;
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Does not log anything to the console.
```
Differential Revision: D67839560
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D67839560 |
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 24, 2025
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.:
```
import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes';
class EventTargetSubclass extends EventTarget {
get oncustomevent(): EventListener | null {
return getEventHandlerAttribute(this, 'customEvent');
}
set oncustomevent(listener: EventListener | null) {
setEventHandlerAttribute(this, 'customEvent', listener);
}
}
const eventTargetInstance = new EventTargetSubclass();
eventTargetInstance.oncustomevent = (event: Event) => {
console.log('custom event received');
};
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Logs 'custom event received' to the console.
eventTargetInstance.oncustomevent = null;
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Does not log anything to the console.
```
Differential Revision: D67839560
rubennorte
force-pushed
the
export-D67839560
branch
from
d986892 to
a9f5f26
Compare
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 24, 2025
…48920) Summary: Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Differential Revision: D67839560
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D67839560 |
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 25, 2025
…48920) Summary: Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Differential Revision: D67839560
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 25, 2025
…48920) Summary: Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Differential Revision: D67839560
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 27, 2025
…48920) Summary: Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Differential Revision: D67839560
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 27, 2025
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.:
```
import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes';
class EventTargetSubclass extends EventTarget {
get oncustomevent(): EventListener | null {
return getEventHandlerAttribute(this, 'customEvent');
}
set oncustomevent(listener: EventListener | null) {
setEventHandlerAttribute(this, 'customEvent', listener);
}
}
const eventTargetInstance = new EventTargetSubclass();
eventTargetInstance.oncustomevent = (event: Event) => {
console.log('custom event received');
};
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Logs 'custom event received' to the console.
eventTargetInstance.oncustomevent = null;
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Does not log anything to the console.
```
Differential Revision: D67839560
rubennorte
force-pushed
the
export-D67839560
branch
from
a9f5f26 to
c3d841a
Compare
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 27, 2025
…48920) Summary: Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Differential Revision: D67839560
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 27, 2025
…48920) Summary: Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Differential Revision: D67839560
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 27, 2025
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.:
```
import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes';
class EventTargetSubclass extends EventTarget {
get oncustomevent(): EventListener | null {
return getEventHandlerAttribute(this, 'customEvent');
}
set oncustomevent(listener: EventListener | null) {
setEventHandlerAttribute(this, 'customEvent', listener);
}
}
const eventTargetInstance = new EventTargetSubclass();
eventTargetInstance.oncustomevent = (event: Event) => {
console.log('custom event received');
};
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Logs 'custom event received' to the console.
eventTargetInstance.oncustomevent = null;
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Does not log anything to the console.
```
Differential Revision: D67839560
rubennorte
force-pushed
the
export-D67839560
branch
from
c3d841a to
d4252db
Compare
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 27, 2025
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.:
```
import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes';
class EventTargetSubclass extends EventTarget {
get oncustomevent(): EventListener | null {
return getEventHandlerAttribute(this, 'customEvent');
}
set oncustomevent(listener: EventListener | null) {
setEventHandlerAttribute(this, 'customEvent', listener);
}
}
const eventTargetInstance = new EventTargetSubclass();
eventTargetInstance.oncustomevent = (event: Event) => {
console.log('custom event received');
};
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Logs 'custom event received' to the console.
eventTargetInstance.oncustomevent = null;
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Does not log anything to the console.
```
Differential Revision: D67839560
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D67839560 |
rubennorte
added a commit
to rubennorte/react-native
that referenced
this pull request
Jan 27, 2025
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.:
```
import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes';
class EventTargetSubclass extends EventTarget {
get oncustomevent(): EventListener | null {
return getEventHandlerAttribute(this, 'customEvent');
}
set oncustomevent(listener: EventListener | null) {
setEventHandlerAttribute(this, 'customEvent', listener);
}
}
const eventTargetInstance = new EventTargetSubclass();
eventTargetInstance.oncustomevent = (event: Event) => {
console.log('custom event received');
};
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Logs 'custom event received' to the console.
eventTargetInstance.oncustomevent = null;
eventTargetInstance.dispatchEvent(new Event('customEvent'));
// Does not log anything to the console.
```
Differential Revision: D67839560
Summary: Changelog: [internal] This implements a (mostly) spec-compliant version of the [`Event`](https://dom.spec.whatwg.org/#interface-event) and [`EventTarget`](https://dom.spec.whatwg.org/#interface-eventtarget) Web interfaces. It does not implement legacy methods in either of the interfaces, and ignores the parts of the spec that are related to Web-specific quirks (shadow roots, re-mapping of animation events with webkit prefixes, etc.). IMPORTANT: This only creates the interfaces and does not expose them externally yet (no `Event` or `EventTarget` in the global scope). Reviewed By: yungsters Differential Revision: D67738145
Summary: Changelog: [internal] Creates a benchmarks to measure the performance of `EventTarget`. Reviewed By: javache Differential Revision: D67750677
Summary: Changelog: [internal] Adds a regression test to make sure we implement the correct spec-compliant behavior for a possible bug in ~~the Web spec~~ __Chrome__: whatwg/dom#1346 Edit: the bug is in the Chrome implementation, not in the spec. Reviewed By: javache Differential Revision: D67758702
…n of ReadOnlyNode (facebook#48427) Summary: Changelog: [internal] The `ReactNativeElement` class was refactored for performance reasons, and the current implementation does **NOT** call `super()`, and it inlines the parent constructor instead. When it eventually extends `EventTarget`, things won't work as expected because the existing `EventTarget` implementation has constructor dependencies. This refactors the current implementation of `EventTarget` to eliminate those constructor side-effects, and eliminates the constructor altogether. This breaks encapsulation, but it has some positive side-effects on performance: 1. Creating `EventTarget` instances is faster because it has no constructor logic. 2. Improves memory by not creating maps to hold the event listeners if no event listeners are ever added to the target (which is very common). 3. Improves the overall runtime performance of the methods in the class by migrating away from private methods (which are known to be slow on the babel transpiled version we're currently using). Extra: it also simplifies making window/the global scope implement the EventTarget interface :) ## Benchmark results Before: | Latency average (ns) | Latency median (ns) | Samples | Task name | Throughput average (ops/s) | Throughput median (ops/s) | | ---|--- |--- |--- |---|---| | 8234.22 ± 0.27% | 8132.00 | 121445 | dispatchEvent, no bubbling, no listeners | 122323 ± 0.02% | 122971 | | 9001.22 ± 0.41% | 8883.00 | 111097 | dispatchEvent, no bubbling, single listener | 111981 ± 0.02% | 112575 | | 51777.94 ± 0.58% | 51247.00 | 19314 | dispatchEvent, no bubbling, multiple listeners | 19393 ± 0.04% | 19513 | | 8256.65 ± 0.29% | 8152.00 | 121115 | dispatchEvent, bubbling, no listeners | 122031 ± 0.02% | 122669 | | 9064.32 ± 0.44% | 8933.00 | 110323 | dispatchEvent, bubbling, single listener per target | 111265 ± 0.02% | 111944 | | 51879.66 ± 0.27% | 51447.00 | 19276 | dispatchEvent, bubbling, multiple listeners per target | 19325 ± 0.04% | 19437 | After: | Latency average (ns) | Latency median (ns) | Samples | Task name | Throughput average (ops/s) | Throughput median (ops/s)| | ---------------------|---------------------|---------|--------------------------------------------------------|----------------------------|--------------------------| | 5664.62 ± 0.50% | 5588.00 | 176535 | dispatchEvent, no bubbling, no listeners | 178219 ± 0.02% | 178955 | | 7232.86 ± 0.50% | 7131.00 | 138258 | dispatchEvent, no bubbling, single listener | 139540 ± 0.02% | 140233 | | 50957.51 ± 0.71% | 50336.00 | 19625 | dispatchEvent, no bubbling, multiple listeners | 19751 ± 0.04% | 19866 | | 5692.36 ± 0.50% | 5618.00 | 175675 | dispatchEvent, bubbling, no listeners | 177315 ± 0.02% | 177999 | | 7277.82 ± 0.38% | 7181.00 | 137404 | dispatchEvent, bubbling, single listener per target | 138560 ± 0.02% | 139256 | | 50493.64 ± 0.28% | 50105.00 | 19805 | dispatchEvent, bubbling, multiple listeners per target | 19855 ± 0.04% | 19958 | Reviewed By: yungsters Differential Revision: D67758408
Summary: Changelog: [internal] This improves the performance of DOM `Event` interface implementation by migrating away from private fields. Reviewed By: yungsters Differential Revision: D67751821
Summary: Changelog: [internal] Makes the constants read-only and accessible through `Event.prototype` as well. Reviewed By: yungsters Differential Revision: D67830012
…uting the global scope (facebook#48962) Summary: Changelog: [internal] We moved away from private fields for `EventTarget` for performance, in favor of normal fields prefixed with underscore, but this would pollute the global scope when we make it extend `EventTarget`. This refactors the implementation to use symbols for all properties to avoid that problem, leaving only `addEventListener` and `removeEventListener` as regular properties in the prototype. Performance-wise this is neutral or a slight improvement according to the existing benchmark. Reviewed By: javache Differential Revision: D68672215
…48920) Summary: Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Reviewed By: javache Differential Revision: D67839560
rubennorte
force-pushed
the
export-D67839560
branch
from
d4252db to
d2e470d
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D67839560 |
Contributor
|
This pull request has been merged in 8445ebc. |
gabrieldonadel
pushed a commit
to gabrieldonadel/react-native
that referenced
this pull request
Aug 12, 2025
Summary: Pull Request resolved: facebook#48920 Changelog: [internal] Implements a module with helpers to define event handler IDL attributes in classes extending `EventTarget`. E.g.: ``` import {getEventHandlerAttribute, setEventHandlerAttribute} from '../path/to/EventHandlerAttributes'; class EventTargetSubclass extends EventTarget { get oncustomevent(): EventListener | null { return getEventHandlerAttribute(this, 'customEvent'); } set oncustomevent(listener: EventListener | null) { setEventHandlerAttribute(this, 'customEvent', listener); } } const eventTargetInstance = new EventTargetSubclass(); eventTargetInstance.oncustomevent = (event: Event) => { console.log('custom event received'); }; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Logs 'custom event received' to the console. eventTargetInstance.oncustomevent = null; eventTargetInstance.dispatchEvent(new Event('customEvent')); // Does not log anything to the console. ``` Reviewed By: javache Differential Revision: D67839560 fbshipit-source-id: f301d174fa9a4c010940b875cadfc31298947c26
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary:
Changelog: [internal]
Implements a module with helpers to define event handler IDL attributes in classes extending
EventTarget. E.g.:Differential Revision: D67839560