Framework: Replace element-closest with registered vendor script

aduth · aduth · commit ec7d8e4bdd53 · 2018-09-12T10:50:50.000-04:00
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -114,6 +114,7 @@ function gutenberg_register_scripts_and_styles() {
 				'\'fetch\' in window' => 'wp-polyfill-fetch',
 				'document.contains'   => 'wp-polyfill-node-contains',
 				'window.FormData && window.FormData.prototype.keys' => 'wp-polyfill-formdata',
+				'Element.prototype.matches && Element.prototype.closest' => 'wp-polyfill-element-closest',
 			)
 		)
 	);
@@ -846,6 +847,10 @@ function gutenberg_register_vendor_scripts() {
 		'wp-polyfill-node-contains',
 		'https://unpkg.com/polyfill-library@3.26.0-0/polyfills/Node/prototype/contains/polyfill.js'
 	);
+	gutenberg_register_vendor_script(
+		'wp-polyfill-element-closest',
+		'https://unpkg.com/element-closest@2.0.2/element-closest.js'
+	);
 	gutenberg_register_vendor_script(
 		'wp-polyfill-ecmascript',
 		'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill' . $suffix . '.js'
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
@@ -33,7 +33,6 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/shortcode": "file:../shortcode",
-		"element-closest": "^2.0.2",
 		"hpq": "^1.2.0",
 		"lodash": "^4.17.10",
 		"rememo": "^3.0.0",
diff --git a/packages/blocks/src/api/raw-handling/index.js b/packages/blocks/src/api/raw-handling/index.js
@@ -2,8 +2,6 @@
  * External dependencies
  */
 import { flatMap, filter, compact } from 'lodash';
-// Also polyfills Element#matches.
-import 'element-closest';
 
 /**
  * Internal dependencies
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -35,7 +35,6 @@
 		"classnames": "^2.2.5",
 		"clipboard": "^1.7.1",
 		"dom-scroll-into-view": "^1.2.1",
-		"element-closest": "^2.0.2",
 		"lodash": "^4.17.10",
 		"memize": "^1.0.5",
 		"moment": "^2.22.1",
diff --git a/packages/components/src/autocomplete/index.js b/packages/components/src/autocomplete/index.js
@@ -3,7 +3,6 @@
  */
 import classnames from 'classnames';
 import { escapeRegExp, find, filter, map, debounce } from 'lodash';
-import 'element-closest';
 
 /**
  * WordPress dependencies
diff --git a/packages/dom/package.json b/packages/dom/package.json
@@ -21,7 +21,6 @@
 	"module": "build-module/index.js",
 	"dependencies": {
 		"@babel/runtime": "^7.0.0",
-		"element-closest": "^2.0.2",
 		"lodash": "^4.17.10"
 	},
 	"publishConfig": {
diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import 'element-closest';
-
 /**
  * References:
  *
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -45,7 +45,6 @@
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
-		"element-closest": "^2.0.2",
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.10",
 		"memize": "^1.0.5",
diff --git a/packages/editor/src/components/block-list/layout.js b/packages/editor/src/components/block-list/layout.js
@@ -11,7 +11,6 @@ import {
 	last,
 } from 'lodash';
 import classnames from 'classnames';
-import 'element-closest';
 
 /**
  * WordPress dependencies
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -12,7 +12,6 @@ import {
 	merge,
 	noop,
 } from 'lodash';
-import 'element-closest';
 
 /**
  * WordPress dependencies
diff --git a/packages/editor/src/utils/dom.js b/packages/editor/src/utils/dom.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import 'element-closest';
-
 /**
  * Given a block client ID, returns the corresponding DOM node for the block,
  * if exists. As much as possible, this helper should be avoided, and used only
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.1.0 (Unreleased)
+
+### New Features
+
+- Browser globals setup now includes polyfill for [`Element#closest`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest)
+
 ## 2.0.0 (2018-07-12)
 
 ### Breaking Change
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
@@ -28,6 +28,7 @@
 	"dependencies": {
 		"@wordpress/jest-console": "file:../jest-console",
 		"babel-jest": "^23.4.2",
+		"element-closest": "^2.0.2",
 		"enzyme": "^3.3.0",
 		"enzyme-adapter-react-16": "^1.1.1",
 		"jest-enzyme": "^6.0.2"
diff --git a/packages/jest-preset-default/scripts/setup-globals.js b/packages/jest-preset-default/scripts/setup-globals.js
@@ -1,3 +1,5 @@
+require( 'element-closest' );
+
 // These are necessary to load TinyMCE successfully
 global.URL = window.URL;
 global.window.tinyMCEPreInit = {

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,3 @@`
`1`		`-/**`
`2`		`- * External dependencies`
`3`		`- */`
`4`		`-import 'element-closest';`
`5`		`-`
`6`	`1`	`/**`
`7`	`2`	`* References:`
`8`	`3`	`*`