Framework: Replace element-closest with registered vendor script #9750

aduth · 2018-09-10T14:37:27Z

This pull request seeks to eliminate element-closest dependency and imports from individual packages, instead replacing with a standard polyfill approach via server-side script enqueue.

Potential future improvements include:

Improved association between script handle as being a polyfill (avoid wp_add_inline_script per dependent)
Avoid polyfill dependencies needing to be kept in sync with current state of codebase using / not using (maybe always load)

Testing instructions:

Verify there are no regressions in Element#closest behaviors, notably in IE11 where it is not supported by default. For example, verify that inserting a quote block and ArrowDown'ing through its citation and into the addition of a default block (verifies usage of Element#closest in WritingFlow's use of isInSameBlock).

youknowriad · 2018-09-10T14:41:03Z

I wonder if we should just do it for wp-polyfill-ecmascript (adding the dependency). This would avoid us to keep track of the exact usage of this feature per script which is very hard to accomplish anyway.

aduth · 2018-09-10T15:27:42Z

@youknowriad Yes, I wasn't too sure how we might want to accomplish the "load always" behavior for element-closest. There's a bit of additional context in #7159 and #7033. With your suggestion, we'd expand what's implied by adding a dependency on wp-polyfill-ecmascript from meaning "latest JavaScript features" to also including "modern browser behaviors". These often collide anyways in our usage, and combining them would make for a simpler developer experience, but they do hold separate meanings which could be worth distinguishing.

Maybe a topic for tomorrow's chat? 🙂

aduth · 2018-09-10T15:29:38Z

Put another way, ECMAScript and WHATWG/W3 are separate standards, though often used interchangeably as we use modern features and for polyfilling. Should we or shouldn't we abandon attempts to keep them distinct?

youknowriad · 2018-09-10T15:32:20Z

core-js which is basically what babel-polyfill uses is not only about ECMAScript but it also includes some WHATWG/W3 standards. I'm not really certain if babel-polyfill picks only the ECMAScript features thought or just enqueues the whole thing.

aduth · 2018-09-10T15:35:26Z

core-js which is basically what babel-polyfill uses is not only about ECMAScript but it also includes some WHATWG/W3 standards.

Is this true? Could you name some such features?

Genuinely curious because I'd commented as such that my assumption is that it's only for ECMAScript:

#9171 (comment)

aduth · 2018-09-10T15:36:32Z

Oh I see now from their (core-js) documentation they have a separate section for web standards:

https://github.com/zloirock/core-js#features

Then it becomes a question of: Are we aligned to core-js, or to babel-polyfill? And does babel-polyfill make the same commitments?

aduth · 2018-09-12T14:49:33Z

Rebased to account for the now-merged #9794, which simplifies the implementation here a fair bit.

I also discovered that newer versions of JSDOM include support for Element#closest (jsdom/jsdom#1555) such that it wouldn't be necessary to explicitly provide this in jest-preset-default. See 52cff5f.

In updating our pinned version, however, I fought with the license checker flagging abab. I think we've seen this on a few occasions before. Ultimately I decided to add an --ignore option to the license checker, to be used for these sorts of cases where we can manually vet the license for a package as being compatible. The abab package has a compatible license (W3C BSD 3-Clause), but because it is specified in its package.json in a non-parseable format, it is marked as being invalid. See aeb7084.

aduth · 2018-09-12T14:51:57Z

cc @pento re: changes to wp-scripts check-licenses

aduth · 2018-09-12T15:27:47Z

What a can of worms.

Updating jsdom revealed another bug, requiring a testURL value to be specified in our Jest configuration. This shouldn't be necessary (and can therefore be removed) once we update to 23.5.0 or newer.

See: jestjs/jest#6766
See: jestjs/jest#6792

pento · 2018-09-13T07:41:44Z

Licenses are the worst. I mean, I get why they don't put an identifier in the license field, because there isn't a SPDX identifier for the W3C variant of the BSD 3-Clause license. But they could just make it up.

I like the --ignore option, but I hope we never have to use it. 65bf762 adds BSD-3-Clause-W3C as a GPL2 compatible license, and adds a check for if the license field is telling us to look in a license file, instead.

aduth · 2018-09-13T12:56:45Z

packages/scripts/scripts/check-licenses.js

@@ -193,6 +225,11 @@ modules.forEach( ( path ) => {
 		);
 	let licenseType = typeof license === 'object' ? license.type : license;

+	// Check if the license we've detected is telling us to look in the license file, instead.
+	if ( licenseType && licenseFiles.find( ( licenseFile ) => licenseType.indexOf( licenseFile ) >= 0 ) ) {
+		licenseType = undefined;


What if the license property is pointing a file describing a truly incompatible license? Wouldn't this wrongly allow the license to be considered valid? I expect this to be even more common for non-standard licenses.

Oh! I missed the code immediately following this, where we try to infer the license type from the presence of a file.

Newer version is SemVer-compatible with jest-environment-jsdom and includes support for Element#closest out of the box. jsdom/jsdom#1555 Required to ignore license validation for abab because while it is a compatible license (BSD 3-clause), the package's `license` field is malformed for parse. https://github.com/jsdom/abab/blob/4327de3aae348710094d9f3c1f0c1477d9feb865/package.json#L26 https://github.com/jsdom/abab/blob/master/LICENSE.md

Avoids issues with localStorage in JSDOM 11.12 Can be removed when running Jest 23.5.0 or newer See: jestjs/jest#6766 See: jestjs/jest#6792

Also, check if the license defined in package.json is telling us to look in the license file, instead.

aduth · 2018-09-13T20:55:28Z

Rebased to resolve conflicts.

At this point just need a 👍

brandonpayton

I tested this in IE11, and everything appears to work as expected. I also checked this in Chrome and observed that the native version of HTMLElement.prototype.closest was intact.

👍 LGTM

brandonpayton · 2018-09-14T20:43:23Z

packages/scripts/scripts/check-licenses.js

@@ -193,6 +225,11 @@ modules.forEach( ( path ) => {
 		);
 	let licenseType = typeof license === 'object' ? license.type : license;

+	// Check if the license we've detected is telling us to look in the license file, instead.
+	if ( licenseType && licenseFiles.find( ( licenseFile ) => licenseType.indexOf( licenseFile ) >= 0 ) ) {


nit: This is a good place to use String#includes which reads a bit better than an index comparison.

mcsf

Good change. :)

…tion

aduth added Framework Issues related to broader framework topics, especially as it relates to javascript Browser Issues Issues or PRs that are related to browser specific problems [Type] Code Quality Issues or PRs that relate to code quality labels Sep 10, 2018

aduth requested review from brandonpayton and mcsf September 10, 2018 14:37

aduth mentioned this pull request Sep 11, 2018

Framework: Add wp-polyfill as central polyfill #9794

Merged

aduth force-pushed the remove/element-closest branch from 4c6fe51 to f6916bd Compare September 12, 2018 14:45

aduth force-pushed the remove/element-closest branch from f6916bd to 52cff5f Compare September 12, 2018 14:50

aduth requested a review from pento September 12, 2018 15:15

aduth commented Sep 13, 2018

View reviewed changes

aduth and others added 5 commits September 13, 2018 16:54

Framework: Replace element-closest with registered vendor script

d0cb647

Scripts: Add support for license ignore

68bc9e7

Testing: Add dummy testURL for Jest config

02abe3f

Avoids issues with localStorage in JSDOM 11.12 Can be removed when running Jest 23.5.0 or newer See: jestjs/jest#6766 See: jestjs/jest#6792

Licenses: Add BSD-3-Clause W3C variant as an allowed license

437b39b

Also, check if the license defined in package.json is telling us to look in the license file, instead.

aduth force-pushed the remove/element-closest branch from 65bf762 to 437b39b Compare September 13, 2018 20:54

brandonpayton approved these changes Sep 14, 2018

View reviewed changes

brandonpayton reviewed Sep 14, 2018

View reviewed changes

mcsf approved these changes Sep 17, 2018

View reviewed changes

aduth added 2 commits September 17, 2018 11:08

Package: Scripts: Use String#includes for improved code clarity

2cc72cc

Package: Scripts: Add CHANGELOG notes for improved license file detec…

4376ae2

…tion

aduth merged commit 45bc8e4 into master Sep 17, 2018

aduth deleted the remove/element-closest branch September 17, 2018 15:35

aduth added this to the 4.0 milestone Sep 17, 2018

yassine4999 mentioned this pull request Nov 30, 2023

[Snyk] Fix for 1 vulnerabilities yassine4999/gutenberg#29

Open

soloinovator mentioned this pull request Nov 30, 2023

[Snyk] Fix for 1 vulnerabilities soloinovator/gutenberg#106

Open

petrescugit mentioned this pull request Nov 30, 2023

[Snyk] Fix for 1 vulnerabilities petrescugit/gutenberg#9

Open

captainbarber99 mentioned this pull request Nov 30, 2023

[Snyk] Fix for 1 vulnerabilities captainbarber99/gutenberg#23

Open

MaxMood96 mentioned this pull request Dec 1, 2023

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#119

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Framework: Replace element-closest with registered vendor script #9750

Framework: Replace element-closest with registered vendor script #9750

aduth commented Sep 10, 2018

youknowriad commented Sep 10, 2018

aduth commented Sep 10, 2018

aduth commented Sep 10, 2018 •

edited

Loading

youknowriad commented Sep 10, 2018

aduth commented Sep 10, 2018

aduth commented Sep 10, 2018 •

edited

Loading

aduth commented Sep 12, 2018 •

edited

Loading

aduth commented Sep 12, 2018

aduth commented Sep 12, 2018

pento commented Sep 13, 2018

aduth Sep 13, 2018

aduth Sep 13, 2018

pento Sep 14, 2018

aduth commented Sep 13, 2018

brandonpayton left a comment

brandonpayton Sep 14, 2018

mcsf left a comment

Framework: Replace element-closest with registered vendor script #9750

Framework: Replace element-closest with registered vendor script #9750

Conversation

aduth commented Sep 10, 2018

youknowriad commented Sep 10, 2018

aduth commented Sep 10, 2018

aduth commented Sep 10, 2018 • edited Loading

youknowriad commented Sep 10, 2018

aduth commented Sep 10, 2018

aduth commented Sep 10, 2018 • edited Loading

aduth commented Sep 12, 2018 • edited Loading

aduth commented Sep 12, 2018

aduth commented Sep 12, 2018

pento commented Sep 13, 2018

aduth Sep 13, 2018

Choose a reason for hiding this comment

aduth Sep 13, 2018

Choose a reason for hiding this comment

pento Sep 14, 2018

Choose a reason for hiding this comment

aduth commented Sep 13, 2018

brandonpayton left a comment

Choose a reason for hiding this comment

brandonpayton Sep 14, 2018

Choose a reason for hiding this comment

mcsf left a comment

Choose a reason for hiding this comment

aduth commented Sep 10, 2018 •

edited

Loading

aduth commented Sep 10, 2018 •

edited

Loading

aduth commented Sep 12, 2018 •

edited

Loading