Skip to content
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

Add eslint rule to warn against using globals for addEventListener #26810

Merged
merged 2 commits into from
Nov 10, 2020

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Nov 8, 2020

Description

This PR adds a custom ESLint rule to warn against using globals (window and document) for addEventListener and removeEventListener. It's good practice to access the document and window relatively through a ref with the ownerDocument and defaultView properties.

I've fixed a few instances in the code base, but it's quite a bit of work to convert and test all instances. Maybe this can be done over several PRs. Eventually, it would be good to error instead of warn.

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Nov 8, 2020

Size Change: -14 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-library/index.js 147 kB -2 B (0%)
build/components/index.js 171 kB +8 B (0%)
build/edit-widgets/index.js 26.3 kB -20 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.77 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.71 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.91 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.87 kB 0 B
build/core-data/index.js 12.5 kB 0 B
build/data-controls/index.js 769 B 0 B
build/data/index.js 8.74 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.45 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.43 kB 0 B
build/edit-post/style.css 6.42 kB 0 B
build/edit-site/index.js 22.6 kB 0 B
build/edit-site/style-rtl.css 3.91 kB 0 B
build/edit-site/style.css 3.91 kB 0 B
build/edit-widgets/style-rtl.css 3.16 kB 0 B
build/edit-widgets/style.css 3.16 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.31 kB 0 B
build/notices/index.js 1.77 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.05 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@ellatrix ellatrix mentioned this pull request Nov 8, 2020
6 tasks
@ellatrix ellatrix force-pushed the try/global-listener-eslint-rule branch from ff2fee7 to 18291ae Compare November 8, 2020 22:15
@ellatrix ellatrix force-pushed the try/global-listener-eslint-rule branch from 18291ae to ad54e03 Compare November 10, 2020 13:06
@ellatrix ellatrix merged commit 25d6204 into master Nov 10, 2020
@ellatrix ellatrix deleted the try/global-listener-eslint-rule branch November 10, 2020 16:59
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 10, 2020
@kevin940726
Copy link
Member

It's good practice to access the document and window relatively through a ref with the ownerDocument and defaultView properties.

@ellatrix I wonder if there's any reference to back this up? Or a counter-example would also be nice!

@nextgenthemes
Copy link

nextgenthemes commented Jan 27, 2021

@ellatrix Can you please provide any info to back this up and why and where this can fail?

And how exactly am I supposed to write this without disabling the rule.

// eslint-disable-next-line @wordpress/no-global-event-listener
document.addEventListener('DOMContentLoaded', (): void => {
	removeUnwantedStuff();
});

The following seems a bit ridiculous, there is no rule for against selecting body this way so this passes.

But am I guessing that I am supposed to work with some element I selected with querySelector or something?

document.body.ownerDocument.documentElement.addEventListener(
	'DOMContentLoaded',
	(): void => {
		removeUnwantedStuff();
	}
);

@ellatrix
Copy link
Member Author

It's only meant for React components. Not sure if there's a way to make it more specific...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants