Skip to content

fix(eslint-plugin): [no-output-native] update native event names #2236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

reduckted
Copy link
Contributor

Fixes #2230

I had a search around the web to see if there was anywhere that had a definitive list of DOM event names. The best place I could find was https://github.com/mdn/browser-compat-data . Specifically, the api directory contains JSON files for each DOM element type (as well as other browser API types). The events are defined against properties ending with _event. For example, Document.json has an afterscriptexecute_event property.

Using that information, we can build the full set of native event names, and we can automate the process of updating the list.

I've created a script that will:

  1. Clone the mdn/browser-compat-data repository.
  2. Look through the api directory and find JSON files that end with Element, as well as including Document.json, Node.json and Window.json.
  3. Parse the JSON from each file and find all event names defined in the data.
  4. Update the get-native-event-names.ts file with the event names.
  5. Remove the cloned repository.

This has added the missing event names, but it has also removed some event names. I believe that the events that were removed should not have been defined as native events in the first place. The no-output-native rule ensures that output bindings are not named as standard DOM events. The event names that have been removed were not raised on DOM types. For example, the audiostart and audioend events are emitted from a SpeechRecognition object, but you don't find a SpeechRecognition object in the DOM.

Copy link

nx-cloud bot commented Feb 9, 2025

View your CI Pipeline Execution ↗ for commit b5fbd68.

Command Status Duration Result
nx run-many -t e2e-suite --parallel 1 ✅ Succeeded 11m 43s View ↗
nx run-many -t test --codeCoverage ✅ Succeeded 1m 24s View ↗
nx run-many -t build,typecheck,check-rule-docs,... ✅ Succeeded 59s View ↗
nx-cloud record -- pnpm nx sync:check ✅ Succeeded 4s View ↗
nx-cloud record -- pnpm format-check ✅ Succeeded 5s View ↗
nx run-many -t test ✅ Succeeded 51s View ↗
nx run-many -t build ✅ Succeeded 21s View ↗

☁️ Nx Cloud last updated this comment at 2025-02-26 09:40:51 UTC

Copy link
Member

@JamesHenry JamesHenry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! Please could you set up a nightly workflow that runs the script and errors if there is a diff (you can look at existing workflows for inspiration from some related logic). Please also give it a manual trigger in addition to the schedule so we can run it on demand.

In future we could make it open a PR with the diff committed, but I won't hold the PR up on that if you don't have chance to implement that now. I just want to make sure we have some automated way to know that this is not up to date, and it doesn't feel right to have the overhead in every CI run, so that's why a nightly makes sense to me

@reduckted
Copy link
Contributor Author

Woah, I just discovered that the data is actually available as an npm package. 🤦‍♂️
https://www.npmjs.com/package/@mdn/browser-compat-data

Perhaps it would be better to add that package as a development dependency and regenerate get-native-event-names.ts whenever that dependency is updated. I see that this repo uses Renovate for updating dependencies. We should be able to configure Renovate to run the script after that package is updated.

@reduckted
Copy link
Contributor Author

We should be able to configure Renovate to run the script after that package is updated.

Doh! Post-upgrade tasks can only be run on self-hosted instances, so that rules out that option.
https://docs.renovatebot.com/configuration-options/#postupgradetasks

I guess the closest we can get is a workflow similar to update-formatting-for-renovate.yml or update-e2e-snapshots-for-renovate.yml. I'll go with that approach for now.

Copy link

codecov bot commented Feb 26, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.25%. Comparing base (5f132be) to head (b5fbd68).
Report is 23 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2236      +/-   ##
==========================================
+ Coverage   90.53%   92.25%   +1.72%     
==========================================
  Files         179      179              
  Lines        3559     3333     -226     
  Branches      600      678      +78     
==========================================
- Hits         3222     3075     -147     
- Misses        183      200      +17     
+ Partials      154       58      -96     
Flag Coverage Δ
unittest 92.25% <ø> (+1.72%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 179 files with indirect coverage changes

@reduckted reduckted requested a review from JamesHenry February 26, 2025 09:45
@JamesHenry JamesHenry merged commit de2f050 into angular-eslint:main Feb 28, 2025
19 checks passed
@JamesHenry
Copy link
Member

Awesome, thanks!

@reduckted reduckted deleted the feature/automate-updating-native-event-names branch March 1, 2025 03:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[no-output-native] Missing native event name
2 participants