Upgrade react-intl (#24906)

This commit is contained in:
Renaud Chaput 2023-05-31 23:43:39 +02:00 committed by GitHub
parent 00c222377d
commit 44cd88adc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
130 changed files with 413 additions and 5046 deletions

View File

@ -293,6 +293,7 @@ module.exports = {
'.*rc.js', '.*rc.js',
'ide-helper.js', 'ide-helper.js',
'config/webpack/**/*', 'config/webpack/**/*',
'config/formatjs-formatter.js',
], ],
env: { env: {

View File

@ -25,18 +25,6 @@ updates:
- dependency-name: 'react-hotkeys' - dependency-name: 'react-hotkeys'
versions: versions:
- '>= 2' - '>= 2'
# TODO: This version has breaking changes
- dependency-name: 'intl-messageformat'
versions:
- '>= 3'
# TODO: This version has breaking changes
- dependency-name: 'react-intl'
versions:
- '>= 3'
# TODO: This version has breaking changes
- dependency-name: 'babel-plugin-react-intl'
versions:
- '>= 7'
# TODO: This version requires code changes # TODO: This version requires code changes
- dependency-name: 'webpack-dev-server' - dependency-name: 'webpack-dev-server'
versions: versions:

View File

@ -41,8 +41,7 @@ jobs:
- name: Check for missing strings in English JSON - name: Check for missing strings in English JSON
run: | run: |
yarn build:development yarn i18n:extract --throws
yarn manage:translations en
git diff --exit-code git diff --exit-code
- name: Check locale file normalization - name: Check locale file normalization

View File

@ -1,4 +1,4 @@
import IntlMessageFormat from 'intl-messageformat'; import { IntlMessageFormat } from 'intl-messageformat';
import { defineMessages } from 'react-intl'; import { defineMessages } from 'react-intl';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';

View File

@ -1,7 +1,6 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import type { InjectedIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { defineMessages, injectIntl } from 'react-intl';
import { IconButton } from './icon_button'; import { IconButton } from './icon_button';
@ -15,9 +14,11 @@ const messages = defineMessages({
interface Props { interface Props {
domain: string; domain: string;
onUnblockDomain: (domain: string) => void; onUnblockDomain: (domain: string) => void;
intl: InjectedIntl;
} }
const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
const intl = useIntl();
const handleDomainUnblock = useCallback(() => { const handleDomainUnblock = useCallback(() => {
onUnblockDomain(domain); onUnblockDomain(domain);
}, [domain, onUnblockDomain]); }, [domain, onUnblockDomain]);
@ -41,5 +42,3 @@ const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
</div> </div>
); );
}; };
export const Domain = injectIntl(_Domain);

View File

@ -1,7 +1,6 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import type { InjectedIntl } from 'react-intl'; import { useIntl, defineMessages } from 'react-intl';
import { injectIntl, defineMessages } from 'react-intl';
import { Icon } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon';
@ -13,10 +12,11 @@ interface Props {
disabled: boolean; disabled: boolean;
maxId: string; maxId: string;
onClick: (maxId: string) => void; onClick: (maxId: string) => void;
intl: InjectedIntl;
} }
const _LoadGap: React.FC<Props> = ({ disabled, maxId, onClick, intl }) => { export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
const intl = useIntl();
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
onClick(maxId); onClick(maxId);
}, [maxId, onClick]); }, [maxId, onClick]);
@ -32,5 +32,3 @@ const _LoadGap: React.FC<Props> = ({ disabled, maxId, onClick, intl }) => {
</button> </button>
); );
}; };
export const LoadGap = injectIntl(_LoadGap);

View File

@ -1,6 +1,6 @@
import { Component } from 'react'; import { Component } from 'react';
import type { InjectedIntl } from 'react-intl'; import type { IntlShape } from 'react-intl';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -103,7 +103,7 @@ const getUnitDelay = (units: string) => {
}; };
export const timeAgoString = ( export const timeAgoString = (
intl: InjectedIntl, intl: IntlShape,
date: Date, date: Date,
now: number, now: number,
year: number, year: number,
@ -155,7 +155,7 @@ export const timeAgoString = (
}; };
const timeRemainingString = ( const timeRemainingString = (
intl: InjectedIntl, intl: IntlShape,
date: Date, date: Date,
now: number, now: number,
timeGiven = true timeGiven = true
@ -190,7 +190,7 @@ const timeRemainingString = (
}; };
interface Props { interface Props {
intl: InjectedIntl; intl: IntlShape;
timestamp: string; timestamp: string;
year: number; year: number;
futureDate?: boolean; futureDate?: boolean;
@ -201,7 +201,7 @@ interface States {
} }
class RelativeTimestamp extends Component<Props, States> { class RelativeTimestamp extends Component<Props, States> {
state = { state = {
now: this.props.intl.now(), now: Date.now(),
}; };
static defaultProps = { static defaultProps = {
@ -223,7 +223,7 @@ class RelativeTimestamp extends Component<Props, States> {
UNSAFE_componentWillReceiveProps(nextProps: Props) { UNSAFE_componentWillReceiveProps(nextProps: Props) {
if (this.props.timestamp !== nextProps.timestamp) { if (this.props.timestamp !== nextProps.timestamp) {
this.setState({ now: this.props.intl.now() }); this.setState({ now: Date.now() });
} }
} }
@ -253,7 +253,7 @@ class RelativeTimestamp extends Component<Props, States> {
: Math.max(updateInterval, unitRemainder); : Math.max(updateInterval, unitRemainder);
this._timer = window.setTimeout(() => { this._timer = window.setTimeout(() => {
this.setState({ now: this.props.intl.now() }); this.setState({ now: Date.now() });
}, delay); }, delay);
} }

View File

@ -1,12 +1,11 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { getLocale } from '../locales'; import { getLocale, onProviderError } from '../locales';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
export default class AdminComponent extends PureComponent { export default class AdminComponent extends PureComponent {
@ -19,7 +18,7 @@ export default class AdminComponent extends PureComponent {
const { locale, children } = this.props; const { locale, children } = this.props;
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
{children} {children}
</IntlProvider> </IntlProvider>
); );

View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
@ -9,11 +9,10 @@ import { fetchCustomEmojis } from '../actions/custom_emojis';
import { hydrateStore } from '../actions/store'; import { hydrateStore } from '../actions/store';
import Compose from '../features/standalone/compose'; import Compose from '../features/standalone/compose';
import initialState from '../initial_state'; import initialState from '../initial_state';
import { getLocale } from '../locales'; import { getLocale, onProviderError } from '../locales';
import { store } from '../store'; import { store } from '../store';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
if (initialState) { if (initialState) {
store.dispatch(hydrateStore(initialState)); store.dispatch(hydrateStore(initialState));
@ -31,7 +30,7 @@ export default class TimelineContainer extends PureComponent {
const { locale } = this.props; const { locale } = this.props;
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
<Provider store={store}> <Provider store={store}>
<Compose /> <Compose />
</Provider> </Provider>

View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { BrowserRouter, Route } from 'react-router-dom'; import { BrowserRouter, Route } from 'react-router-dom';
@ -16,11 +16,10 @@ import { connectUserStream } from 'mastodon/actions/streaming';
import ErrorBoundary from 'mastodon/components/error_boundary'; import ErrorBoundary from 'mastodon/components/error_boundary';
import UI from 'mastodon/features/ui'; import UI from 'mastodon/features/ui';
import initialState, { title as siteTitle } from 'mastodon/initial_state'; import initialState, { title as siteTitle } from 'mastodon/initial_state';
import { getLocale } from 'mastodon/locales'; import { getLocale, onProviderError } from 'mastodon/locales';
import { store } from 'mastodon/store'; import { store } from 'mastodon/store';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`; const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
@ -83,7 +82,7 @@ export default class Mastodon extends PureComponent {
const { locale } = this.props; const { locale } = this.props;
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
<ReduxProvider store={store}> <ReduxProvider store={store}>
<ErrorBoundary> <ErrorBoundary>
<BrowserRouter> <BrowserRouter>

View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { fromJS } from 'immutable'; import { fromJS } from 'immutable';
@ -14,11 +14,10 @@ import Audio from 'mastodon/features/audio';
import Card from 'mastodon/features/status/components/card'; import Card from 'mastodon/features/status/components/card';
import MediaModal from 'mastodon/features/ui/components/media_modal'; import MediaModal from 'mastodon/features/ui/components/media_modal';
import Video from 'mastodon/features/video'; import Video from 'mastodon/features/video';
import { getLocale } from 'mastodon/locales'; import { getLocale, onProviderError } from 'mastodon/locales';
import { getScrollbarWidth } from 'mastodon/utils/scrollbar'; import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
const { localeData, messages } = getLocale(); const { messages } = getLocale();
addLocaleData(localeData);
const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio }; const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };
@ -84,7 +83,7 @@ export default class MediaContainer extends PureComponent {
} }
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
<> <>
{[].map.call(components, (component, i) => { {[].map.call(components, (component, i) => {
const componentName = component.getAttribute('data-component'); const componentName = component.getAttribute('data-component');

View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -77,7 +77,7 @@ class Follows extends PureComponent {
{loadedContent} {loadedContent}
</div> </div>
<p className='onboarding__lead'><FormattedHTMLMessage id='onboarding.tips.accounts_from_other_servers' defaultMessage='<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!' /></p> <p className='onboarding__lead'><FormattedMessage id='onboarding.tips.accounts_from_other_servers' defaultMessage='<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p>
<div className='onboarding__footer'> <div className='onboarding__footer'>
<button className='link-button' onClick={onBack}><FormattedMessage id='onboarding.actions.back' defaultMessage='Take me back' /></button> <button className='link-button' onClick={onBack}><FormattedMessage id='onboarding.actions.back' defaultMessage='Take me back' /></button>

View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage, FormattedHTMLMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -168,9 +168,9 @@ class Share extends PureComponent {
<CopyPasteText value={intl.formatMessage(messages.shareableMessage, { username: `@${account.get('username')}@${domain}`, url })} /> <CopyPasteText value={intl.formatMessage(messages.shareableMessage, { username: `@${account.get('username')}@${domain}`, url })} />
<TipCarousel> <TipCarousel>
<div><p className='onboarding__lead'><FormattedHTMLMessage id='onboarding.tips.verification' defaultMessage='<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!' /></p></div> <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.verification' defaultMessage='<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
<div><p className='onboarding__lead'><FormattedHTMLMessage id='onboarding.tips.migration' defaultMessage='<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!' values={{ domain }} /></p></div> <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.migration' defaultMessage='<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!' values={{ domain, strong: chunks => <strong>{chunks}</strong> }} /></p></div>
<div><p className='onboarding__lead'><FormattedHTMLMessage id='onboarding.tips.2fa' defaultMessage='<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!' /></p></div> <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.2fa' defaultMessage='<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
</TipCarousel> </TipCarousel>
<p className='onboarding__lead'><FormattedMessage id='onboarding.share.next_steps' defaultMessage='Possible next steps:' /></p> <p className='onboarding__lead'><FormattedMessage id='onboarding.share.next_steps' defaultMessage='Possible next steps:' /></p>

View File

@ -0,0 +1,14 @@
import { setLocale } from "./locales";
export async function loadLocale() {
const locale = document.querySelector('html').lang || 'en';
const localeData = await import(
/* webpackMode: "lazy" */
/* webpackChunkName: "locale/[request]" */
/* webpackInclude: /\.json$/ */
/* webpackPreload: true */
`mastodon/locales/${locale}.json`);
setLocale({ messages: localeData });
}

File diff suppressed because it is too large Load Diff

View File

@ -7,3 +7,16 @@ export function setLocale(locale) {
export function getLocale() { export function getLocale() {
return theLocale; return theLocale;
} }
export function onProviderError(error) {
// Silent the error, like upstream does
if(process.env.NODE_ENV === 'production') return;
// This browser does not advertise Intl support for this locale, we only print a warning
// As-per the spec, the browser should select the best matching locale
if(typeof error === "object" && error.message.match("MISSING_DATA")) {
console.warn(error.message);
}
console.error(error);
}

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,5 +0,0 @@
[
"account.badges.bot",
"compose_form.publish_loud",
"search_results.hashtags"
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

View File

@ -1,2 +0,0 @@
[
]

Some files were not shown because too many files have changed in this diff Show More