diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 6b562e5bf..e829eaa1f 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -54,12 +54,12 @@ module.exports = { }, }, polyfills: [ - 'es:all', - 'fetch', - 'IntersectionObserver', - 'Promise', - 'URL', - 'URLSearchParams', + 'es:all', // core-js + 'IntersectionObserver', // npm:intersection-observer + 'Promise', // core-js + 'ResizeObserver', // npm:resize-observer-polyfill + 'URL', // core-js + 'URLSearchParams', // core-js ], }, diff --git a/app/soapbox/hooks/useDimensions.ts b/app/soapbox/hooks/useDimensions.ts index b08c05f4e..ae0321e2b 100644 --- a/app/soapbox/hooks/useDimensions.ts +++ b/app/soapbox/hooks/useDimensions.ts @@ -1,5 +1,4 @@ import { useEffect, useMemo, useState } from 'react'; -import ResizeObserver from 'resize-observer-polyfill'; type UseDimensionsRect = { width: number, height: number }; type UseDimensionsResult = [Element | null, any, any] diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx index 9fc753990..cb1045e0b 100644 --- a/app/soapbox/main.tsx +++ b/app/soapbox/main.tsx @@ -20,6 +20,7 @@ import '../soapbox/iframe'; import '../styles/application.scss'; import '../styles/tailwind.css'; +import './polyfills'; import './precheck'; import { default as Soapbox } from './containers/soapbox'; import * as monitoring from './monitoring'; diff --git a/app/soapbox/polyfills.ts b/app/soapbox/polyfills.ts new file mode 100644 index 000000000..21947e4fe --- /dev/null +++ b/app/soapbox/polyfills.ts @@ -0,0 +1,8 @@ +import 'intersection-observer'; +import ResizeObserver from 'resize-observer-polyfill'; + +// Needed by Virtuoso +// https://github.com/petyosi/react-virtuoso#browser-support +if (!window.ResizeObserver) { + window.ResizeObserver = ResizeObserver; +} \ No newline at end of file diff --git a/package.json b/package.json index 06f47abdc..8de0fdf0e 100644 --- a/package.json +++ b/package.json @@ -127,6 +127,7 @@ "http-link-header": "^1.0.2", "immutable": "^4.2.1", "imports-loader": "^4.0.0", + "intersection-observer": "^0.12.2", "intl-messageformat": "9.13.0", "intl-messageformat-parser": "^6.0.0", "intl-pluralrules": "^1.3.1", diff --git a/webpack/production.ts b/webpack/production.ts index 78845be37..2ba64799f 100644 --- a/webpack/production.ts +++ b/webpack/production.ts @@ -50,7 +50,6 @@ const configuration: Configuration = { ], optional: [ '**/locale_*.js', // don't fetch every locale; the user only needs one - '**/*_polyfills-*.js', // the user may not need polyfills '**/*.chunk.js', // only cache chunks when needed '**/*.chunk.css', '**/*.woff2', // the user may have system-fonts enabled diff --git a/yarn.lock b/yarn.lock index a1fb69a9b..f84e33848 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6653,6 +6653,11 @@ intersection-observer@^0.12.0: resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa" integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ== +intersection-observer@^0.12.2: + version "0.12.2" + resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375" + integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg== + intl-messageformat-parser@6.1.2: version "6.1.2" resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.1.2.tgz#28c65f3689f538e66c7cf628881548d6a82ff3c2"