Skip to content

Use Fetch for url-exists, if available #1424

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Jun 25, 2018
Merged

Use Fetch for url-exists, if available #1424

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 35 additions & 24 deletions utilities/warning/url-exists.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;