[Glitch] Improve Babel configuration and automatically load polyfills

Port 0e3401bc1c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/polyfills/base_polyfills.ts

@@ -1,30 +0,0 @@
-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 (!Object.hasOwn(HTMLCanvasElement.prototype, 'toBlob')) {
-  const BASE64_MARKER = ';base64,';
-
-  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-    value: function (
-      this: HTMLCanvasElement,
-      callback: BlobCallback,
-      type = 'image/png',
-      quality: unknown,
-    ) {
-      const dataURL: string = this.toDataURL(type, quality);
-      let data;
-
-      if (dataURL.includes(BASE64_MARKER)) {
-        const [, base64] = dataURL.split(BASE64_MARKER);
-        data = decodeBase64(base64);
-      } else {
-        [, data] = dataURL.split(',');
-      }
-
-      callback(new Blob([data], { type }));
-    },
-  });
-}

app/javascript/flavours/glitch/polyfills/extra_polyfills.ts

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

app/javascript/flavours/glitch/polyfills/index.ts

@@ -4,39 +4,18 @@
 
 import { loadIntlPolyfills } from './intl';
 
-function importBasePolyfills() {
-  return import(/* webpackChunkName: "base_polyfills" */ './base_polyfills');
-}
-
 function importExtraPolyfills() {
   return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills');
 }
 
 export function loadPolyfills() {
-  const needsBasePolyfills = !(
+  // Safari does not have requestIdleCallback.
-    'toBlob' in HTMLCanvasElement.prototype &&
-    '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.
-  /* eslint-disable @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types */
+  const needsExtraPolyfills = !window.requestIdleCallback;
-  const needsExtraPolyfills = !(
-    window.AbortController &&
-    window.IntersectionObserver &&
-    window.IntersectionObserverEntry &&
-    'isIntersecting' in IntersectionObserverEntry.prototype &&
-    window.requestIdleCallback
-  );
-  /* eslint-enable @typescript-eslint/no-unnecessary-condition */
 
   return Promise.all([
     loadIntlPolyfills(),
-    needsBasePolyfills && importBasePolyfills(),
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types
     needsExtraPolyfills && importExtraPolyfills(),
   ]);
 }