From e22c3cd7687ee135120b4aa0eb3a982435515a13 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Tue, 31 Oct 2023 11:55:13 +0100 Subject: [PATCH] [Glitch] Improve Babel configuration and automatically load polyfills Port 0e3401bc1c24fc1f6d7e04e9d2394d71b53a1845 to glitch-soc Signed-off-by: Claire --- .../glitch/polyfills/base_polyfills.ts | 30 ------------------- .../glitch/polyfills/extra_polyfills.ts | 1 - .../flavours/glitch/polyfills/index.ts | 27 ++--------------- 3 files changed, 3 insertions(+), 55 deletions(-) delete mode 100644 app/javascript/flavours/glitch/polyfills/base_polyfills.ts diff --git a/app/javascript/flavours/glitch/polyfills/base_polyfills.ts b/app/javascript/flavours/glitch/polyfills/base_polyfills.ts deleted file mode 100644 index 71565236cd..0000000000 --- a/app/javascript/flavours/glitch/polyfills/base_polyfills.ts +++ /dev/null @@ -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 })); - }, - }); -} diff --git a/app/javascript/flavours/glitch/polyfills/extra_polyfills.ts b/app/javascript/flavours/glitch/polyfills/extra_polyfills.ts index e6c69de8b5..a8d5530c5f 100644 --- a/app/javascript/flavours/glitch/polyfills/extra_polyfills.ts +++ b/app/javascript/flavours/glitch/polyfills/extra_polyfills.ts @@ -1,2 +1 @@ -import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'; import 'requestidlecallback'; diff --git a/app/javascript/flavours/glitch/polyfills/index.ts b/app/javascript/flavours/glitch/polyfills/index.ts index e166c09d0e..431c5b0f30 100644 --- a/app/javascript/flavours/glitch/polyfills/index.ts +++ b/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 = !( - '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. + // Safari 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.AbortController && - window.IntersectionObserver && - window.IntersectionObserverEntry && - 'isIntersecting' in IntersectionObserverEntry.prototype && - window.requestIdleCallback - ); - /* eslint-enable @typescript-eslint/no-unnecessary-condition */ + const needsExtraPolyfills = !window.requestIdleCallback; 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(), ]); }