diff --git a/app/javascript/mastodon/load_polyfills.js b/app/javascript/mastodon/load_polyfills.js new file mode 100644 index 00000000000..bc546859532 --- /dev/null +++ b/app/javascript/mastodon/load_polyfills.js @@ -0,0 +1,36 @@ +// Convenience function to load polyfills and return a promise when it's done. +// If there are no polyfills, then this is just Promise.resolve() which means +// it will execute in the same tick of the event loop (i.e. near-instant). + +function importBasePolyfills() { + return import(/* webpackChunkName: "base_polyfills" */ './base_polyfills'); +} + +function importExtraPolyfills() { + return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills'); +} + +function loadPolyfills() { + const needsBasePolyfills = !( + window.Intl && + Object.assign && + Number.isNaN && + window.Symbol && + Array.prototype.includes + ); + + // Latest version of Firefox and Safari do not have IntersectionObserver. + // Edge does not have requestIdleCallback. + // This avoids shipping them all the polyfills. + const needsExtraPolyfills = !( + window.IntersectionObserver && + window.requestIdleCallback + ); + + return Promise.all([ + needsBasePolyfills && importBasePolyfills(), + needsExtraPolyfills && importExtraPolyfills(), + ]); +} + +export default loadPolyfills; diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index be40726c6ea..8932dc5138d 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -1,32 +1,6 @@ import main from '../mastodon/main'; +import loadPolyfills from '../mastodon/load_polyfills'; -const needsBasePolyfills = !( - window.Intl && - Object.assign && - Number.isNaN && - window.Symbol && - Array.prototype.includes -); - -const needsExtraPolyfills = !( - window.IntersectionObserver && - window.requestIdleCallback -); - -// Latest version of Firefox and Safari do not have IntersectionObserver. -// Edge does not have requestIdleCallback. -// This avoids shipping them all the polyfills. -if (needsBasePolyfills) { - Promise.all([ - import(/* webpackChunkName: "base_polyfills" */ '../mastodon/base_polyfills'), - import(/* webpackChunkName: "extra_polyfills" */ '../mastodon/extra_polyfills'), - ]).then(main).catch(e => { - console.error(e); // eslint-disable-line no-console - }); -} else if (needsExtraPolyfills) { - import(/* webpackChunkName: "extra_polyfills" */ '../mastodon/extra_polyfills').then(main).catch(e => { - console.error(e); // eslint-disable-line no-console - }); -} else { - main(); -} +loadPolyfills().then(main).catch(e => { + console.error(e); // eslint-disable-line no-console +}); diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 9f71b6dc5ab..69c942f3429 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -3,6 +3,7 @@ import { getLocale } from 'mastodon/locales'; import { length } from 'stringz'; import IntlRelativeFormat from 'intl-relativeformat'; import { delegate } from 'rails-ujs'; +import loadPolyfills from '../mastodon/load_polyfills'; require.context('../images/', true); @@ -85,12 +86,6 @@ function main() { }); } -if (!window.Intl) { - import(/* webpackChunkName: "base_polyfills" */ 'mastodon/base_polyfills').then(() => { - main(); - }).catch(error => { - console.log(error); // eslint-disable-line no-console - }); -} else { - main(); -} +loadPolyfills().then(main).catch(error => { + console.log(error); // eslint-disable-line no-console +});