Merge pull request #1424 from celador/1423-synchronous-http-request

Use Fetch for url-exists, if available

Author: interactivellama

utilities/warning/url-exists.js

@@ -13,32 +13,43 @@ if (process.env.NODE_ENV !== 'production') {
 	const hasWarned = {};
 	let hasExecuted;
 
-	// Using XMLHttpRequest can cause problems in non-browser environments. This should be completely removed in production environment and should not execute in a testing environment.
-	urlExists = function (control, url, comment) {
-		if (
-			!hasExecuted &&
-			!hasWarned[`${control}-path`] &&
-			typeof window !== 'undefined' &&
-			XMLHttpRequest &&
-			process.env.NODE_ENV !== 'test'
-		) {
-			const http = new XMLHttpRequest();
-			http.open('GET', url, false);
-			http.send();
-			hasExecuted = true;
-
-			if (http.status === 404) {
-				const additionalComment = comment ? ` ${comment}` : '';
-				/* eslint-disable max-len */
-				warning(
-					!url,
-					`The icon asset was not found at ${url}. Make sure the path to the icon asset is correct. You can set the icon path by importing the IconSettings component, \`<IconSettings iconPath=[/assets/icons]>\` from \`components/iconSettings\`, and wrap that component around your entire app or around individual components using icons. If you are using the \`<Icon>\` component, you can also pass the url to \`this.props.path\`.${additionalComment}`
-				);
-				/* eslint-enable max-len */
-				hasWarned[`${control}-path`] = !!url;
-			}
+	const warn = (control, url, comment) => (res) => {
+		hasExecuted = true;
+		if (res.status === 404) {
+			const additionalComment = comment ? ` ${comment}` : '';
+			/* eslint-disable max-len */
+			warning(
+				!url,
+				`The icon asset was not found at ${url}. Make sure the path to the icon asset is correct. You can set the icon path by importing the IconSettings component, \`<IconSettings iconPath=[/assets/icons]>\` from \`components/iconSettings\`, and wrap that component around your entire app or around individual components using icons. If you are using the \`<Icon>\` component, you can also pass the url to \`this.props.path\`.${additionalComment}`
+			);
+			/* eslint-enable max-len */
+			hasWarned[`${control}-path`] = !!url;
 		}
 	};
+
+	const shouldWarn = (control) =>
+		!hasExecuted &&
+		!hasWarned[`${control}-path`] &&
+		typeof window !== 'undefined' &&
+		process.env.NODE_ENV !== 'test';
+
+	if (typeof fetch === 'function') {
+		urlExists = function (control, url, comment) {
+			if (shouldWarn(control)) {
+				fetch(url).then(warn(control, url, comment));
+			}
+		};
+	} else {
+		// Using XMLHttpRequest can cause problems in non-browser environments. This should be completely removed in production environment and should not execute in a testing environment.
+		urlExists = function (control, url, comment) {
+			if (shouldWarn(control) && XMLHttpRequest) {
+				const http = new XMLHttpRequest();
+				http.open('GET', url, false);
+				http.send();
+				warn(control, url, comment)(http);
+			}
+		};
+	}
 }
 
 export default urlExists;