Extract polyfill loading into single module (#3421)

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;

app/javascript/packs/application.js

@@ -1,32 +1,6 @@
 import main from '../mastodon/main';
+import loadPolyfills from '../mastodon/load_polyfills';
 
-const needsBasePolyfills = !(
+loadPolyfills().then(main).catch(e => {
-  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();
-}

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) {
+loadPolyfills().then(main).catch(error => {
-  import(/* webpackChunkName: "base_polyfills" */ 'mastodon/base_polyfills').then(() => {
-    main();
-  }).catch(error => {
   console.log(error); // eslint-disable-line no-console
-  });
+});
-} else {
-  main();
-}