Rework polyfills loading (#24907)

app/javascript/mastodon/polyfills/base_polyfills.ts

@@ -0,0 +1,27 @@
+import 'intl';
+import 'intl/locale-data/jsonp/en';
+import 'core-js/features/object/assign';
+import 'core-js/features/object/values';
+import 'core-js/features/symbol';
+import 'core-js/features/promise/finally';
+import { decode as decodeBase64 } from '../utils/base64';
+
+if (!HTMLCanvasElement.prototype.toBlob) {
+  const BASE64_MARKER = ';base64,';
+
+  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+    value(callback: BlobCallback, type = 'image/png', quality: any)  {
+      const dataURL = this.toDataURL(type, quality);
+      let data;
+
+      if (dataURL.indexOf(BASE64_MARKER) >= 0) {
+        const [, base64] = dataURL.split(BASE64_MARKER);
+        data = decodeBase64(base64);
+      } else {
+        [, data] = dataURL.split(',');
+      }
+
+      callback(new Blob([data], { type }));
+    },
+  });
+}

app/javascript/mastodon/polyfills/extra_polyfills.ts

@@ -0,0 +1,2 @@
+import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
+import 'requestidlecallback';

app/javascript/mastodon/polyfills/index.ts

@@ -0,0 +1,38 @@
+// 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');
+}
+
+export function loadPolyfills() {
+  const needsBasePolyfills = !(
+    'toBlob' in HTMLCanvasElement.prototype &&
+    'Intl' in window &&
+    'assign' in Object &&
+    'values' in Object &&
+    'Symbol' in window &&
+    'finally' in Promise.prototype
+  );
+
+  // 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.AbortController &&
+    window.IntersectionObserver &&
+    window.IntersectionObserverEntry &&
+    'isIntersecting' in IntersectionObserverEntry.prototype &&
+    window.requestIdleCallback
+  );
+
+  return Promise.all([
+    needsBasePolyfills && importBasePolyfills(),
+    needsExtraPolyfills && importExtraPolyfills(),
+  ]);
+}