Merge branch 'polyfills' into 'develop'

Increase compatibility with older browsers

See merge request soapbox-pub/soapbox!2221
environments/review-develop-3zknud/deployments/2429
Alex Gleason 2 years ago
commit eb54e5c15c

@ -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
],
},

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Admin: redirect the homepage to any URL.
- Compatibility: added compatibility with Friendica.
- Posts: bot badge on statuses from bot accounts.
- Compatibility: improved browser support for older browsers.
### Changed
- Chats: improved display of media attachments.

@ -157,7 +157,8 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
if (lastTokenUpdated && !valueUpdated) {
return false;
} else {
return super.shouldComponentUpdate!(nextProps, nextState, undefined);
// https://stackoverflow.com/a/35962835
return super.shouldComponentUpdate!.bind(this)(nextProps, nextState, undefined);
}
}

@ -248,10 +248,9 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
<div
role='dialog'
className={classNames({
'my-2 mx-auto relative pointer-events-none flex items-center': true,
'my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)]': true,
'p-4 md:p-0': type !== 'MEDIA',
})}
style={{ minHeight: 'calc(100% - 3.5rem)' }}
>
{children}
</div>

@ -1,4 +1,5 @@
import { useQuery, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import { FormattedMessage } from 'react-intl';
@ -24,9 +25,9 @@ const Ad: React.FC<IAd> = ({ ad }) => {
// Fetch the impression URL (if any) upon displaying the ad.
// Don't fetch it more than once.
useQuery(['ads', 'impression', ad.impression], () => {
useQuery(['ads', 'impression', ad.impression], async () => {
if (ad.impression) {
return fetch(ad.impression);
return await axios.get(ad.impression);
}
}, { cacheTime: Infinity, staleTime: Infinity });

@ -1,3 +1,5 @@
import axios from 'axios';
import { getSettings } from 'soapbox/actions/settings';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { normalizeAd, normalizeCard } from 'soapbox/normalizers';
@ -28,14 +30,13 @@ const RumbleAdProvider: AdProvider = {
const endpoint = soapboxConfig.extensions.getIn(['ads', 'endpoint']) as string | undefined;
if (endpoint) {
const response = await fetch(endpoint, {
headers: {
'Accept-Language': settings.get('locale', '*') as string,
},
});
if (response.ok) {
const data = await response.json() as RumbleApiResponse;
try {
const { data } = await axios.get<RumbleApiResponse>(endpoint, {
headers: {
'Accept-Language': settings.get('locale', '*') as string,
},
});
return data.ads.map(item => normalizeAd({
impression: item.impression,
card: normalizeCard({
@ -45,6 +46,8 @@ const RumbleAdProvider: AdProvider = {
}),
expires_at: new Date(item.expires * 1000),
}));
} catch (e) {
// do nothing
}
}

@ -1,3 +1,5 @@
import axios from 'axios';
import { getSettings } from 'soapbox/actions/settings';
import { normalizeCard } from 'soapbox/normalizers';
@ -18,18 +20,19 @@ const TruthAdProvider: AdProvider = {
const state = getState();
const settings = getSettings(state);
const response = await fetch('/api/v2/truth/ads?device=desktop', {
headers: {
'Accept-Language': settings.get('locale', '*') as string,
},
});
try {
const { data } = await axios.get<TruthAd[]>('/api/v2/truth/ads?device=desktop', {
headers: {
'Accept-Language': settings.get('locale', '*') as string,
},
});
if (response.ok) {
const data = await response.json() as TruthAd[];
return data.map(item => ({
...item,
card: normalizeCard(item.card),
}));
} catch (e) {
// do nothing
}
return [];

@ -50,7 +50,7 @@ describe('<UI />', () => {
await waitFor(() => {
expect(screen.getByTestId('cta-banner')).toHaveTextContent('Sign up now to discuss');
}, {
timeout: 2000,
timeout: 5000,
});
});
});

@ -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]

@ -1,3 +1,5 @@
import './polyfills';
import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
import React from 'react';
import { createRoot } from 'react-dom/client';

@ -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;
}

@ -1,3 +1,4 @@
/* eslint-disable compat/compat */
import IntlMessageFormat from 'intl-messageformat';
import 'intl-pluralrules';
import unescape from 'lodash/unescape';

@ -7,8 +7,8 @@
}
.media-modal {
width: 100%;
height: 100%;
// https://stackoverflow.com/a/8468131
@apply w-full h-full absolute inset-0;
.audio-player.detailed,
.extended-video-player {

@ -5,7 +5,7 @@ module.exports = (api) => {
debug: false,
modules: false,
useBuiltIns: 'usage',
corejs: '3.15',
corejs: '3.27',
};
const config = {

@ -31,9 +31,9 @@
},
"license": "AGPL-3.0-or-later",
"browserslist": [
"> 0.5%",
"> 0.2%",
"last 2 versions",
"not IE 11",
"last 4 years",
"not dead"
],
"dependencies": {
@ -111,7 +111,7 @@
"cheerio": "^1.0.0-rc.10",
"clsx": "^1.2.1",
"copy-webpack-plugin": "^11.0.0",
"core-js": "^3.15.2",
"core-js": "^3.27.2",
"cryptocurrency-icons": "^0.18.1",
"css-loader": "^6.7.1",
"cssnano": "^5.1.10",
@ -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",

@ -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
@ -138,6 +137,7 @@ const configuration: Configuration = {
'/apple-touch-icon.png',
'/browserconfig.xml',
'/robots.txt',
'/report.html',
];
if (backendRoutes.some(path => pathname.startsWith(path)) || pathname.endsWith('/embed')) {

@ -4498,16 +4498,16 @@ core-js-pure@^3.23.3:
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.27.1.tgz#ede4a6b8440585c7190062757069c01d37a19dca"
integrity sha512-BS2NHgwwUppfeoqOXqi08mUqS5FiZpuRuJJpKsaME7kJz0xxuk0xkhDdfMIlP/zLa80krBqss1LtD7f889heAw==
core-js@^3.15.2:
version "3.18.0"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49"
integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==
core-js@^3.16.2:
version "3.23.5"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.5.tgz#1f82b0de5eece800827a2f59d597509c67650475"
integrity sha512-7Vh11tujtAZy82da4duVreQysIoO2EvVrur7y6IzZkH1IHPSekuDi8Vuw1+YKjkbfWLRD7Nc9ICQ/sIUDutcyg==
core-js@^3.27.2:
version "3.27.2"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.27.2.tgz#85b35453a424abdcacb97474797815f4d62ebbf7"
integrity sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==
core-js@^3.8.2:
version "3.23.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.1.tgz#9f9a9255115f62c512db56d567f636da32ca0b78"
@ -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"

Loading…
Cancel
Save