Fix /share and cleanup and reorganize frontend locale loading (#25240)

.prettierignore

@@ -61,7 +61,7 @@ docker-compose.override.yml
 /app/javascript/mastodon/features/emoji/emoji_map.json
 
 # Ignore locale files
-/app/javascript/mastodon/locales
+/app/javascript/mastodon/locales/*.json
 /config/locales
 
 # Ignore vendored CSS reset

app/helpers/react_component_helper.rb

@@ -11,7 +11,7 @@ def react_component(name, props = {}, &block)
   end
 
   def react_admin_component(name, props = {})
-    data = { 'admin-component': name.to_s.camelcase, props: Oj.dump({ locale: I18n.locale }.merge(props)) }
+    data = { 'admin-component': name.to_s.camelcase, props: Oj.dump(props) }
     div_tag_with_data(data)
   end
 

app/javascript/mastodon/actions/streaming.js

@@ -24,8 +24,6 @@ import {
   fillListTimelineGaps,
 } from './timelines';
 
-const { messages } = getLocale();
-
 /**
  * @param {number} max
  * @returns {number}
@@ -43,8 +41,10 @@ const randomUpTo = max =>
  * @param {function(object): boolean} [options.accept]
  * @returns {function(): void}
  */
-export const connectTimelineStream = (timelineId, channelName, params = {}, options = {}) =>
-  connectStream(channelName, params, (dispatch, getState) => {
+export const connectTimelineStream = (timelineId, channelName, params = {}, options = {}) => {
+  const { messages } = getLocale();
+
+  return connectStream(channelName, params, (dispatch, getState) => {
     const locale = getState().getIn(['meta', 'locale']);
 
     // @ts-expect-error
@@ -121,6 +121,7 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
       },
     };
   });
+};
 
 /**
  * @param {Function} dispatch

app/javascript/mastodon/containers/admin_component.jsx

@@ -1,24 +1,19 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { IntlProvider } from 'react-intl';
-
-import { getLocale, onProviderError } from '../locales';
-
-const { messages } = getLocale();
+import { IntlProvider } from 'mastodon/locales';
 
 export default class AdminComponent extends PureComponent {
 
   static propTypes = {
-    locale: PropTypes.string.isRequired,
     children: PropTypes.node.isRequired,
   };
 
   render () {
-    const { locale, children } = this.props;
+    const { children } = this.props;
 
     return (
-      <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
+      <IntlProvider>
         {children}
       </IntlProvider>
     );

app/javascript/mastodon/containers/compose_container.jsx

@@ -1,36 +1,26 @@
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { IntlProvider } from 'react-intl';
-
 import { Provider } from 'react-redux';
 
 import { fetchCustomEmojis } from '../actions/custom_emojis';
 import { hydrateStore } from '../actions/store';
 import Compose from '../features/standalone/compose';
 import initialState from '../initial_state';
-import { getLocale, onProviderError } from '../locales';
+import { IntlProvider } from '../locales';
 import { store } from '../store';
 
-const { messages } = getLocale();
 
 if (initialState) {
   store.dispatch(hydrateStore(initialState));
 }
 
 store.dispatch(fetchCustomEmojis());
 
-export default class TimelineContainer extends PureComponent {
-
-  static propTypes = {
-    locale: PropTypes.string.isRequired,
-  };
+export default class ComposeContainer extends PureComponent {
 
   render () {
-    const { locale } = this.props;
-
     return (
-      <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
+      <IntlProvider>
         <Provider store={store}>
           <Compose />
         </Provider>

app/javascript/mastodon/containers/mastodon.jsx

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { IntlProvider } from 'react-intl';
-
 import { Helmet } from 'react-helmet';
 import { BrowserRouter, Route } from 'react-router-dom';
 
@@ -16,11 +14,9 @@ import { connectUserStream } from 'mastodon/actions/streaming';
 import ErrorBoundary from 'mastodon/components/error_boundary';
 import UI from 'mastodon/features/ui';
 import initialState, { title as siteTitle } from 'mastodon/initial_state';
-import { getLocale, onProviderError } from 'mastodon/locales';
+import { IntlProvider } from 'mastodon/locales';
 import { store } from 'mastodon/store';
 
-const { messages } = getLocale();
-
 const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
 
 const hydrateAction = hydrateStore(initialState);
@@ -40,10 +36,6 @@ const createIdentityContext = state => ({
 
 export default class Mastodon extends PureComponent {
 
-  static propTypes = {
-    locale: PropTypes.string.isRequired,
-  };
-
   static childContextTypes = {
     identity: PropTypes.shape({
       signedIn: PropTypes.bool.isRequired,
@@ -79,10 +71,8 @@ export default class Mastodon extends PureComponent {
   }
 
   render () {
-    const { locale } = this.props;
-
     return (
-      <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
+      <IntlProvider>
         <ReduxProvider store={store}>
           <ErrorBoundary>
             <BrowserRouter>

app/javascript/mastodon/containers/media_container.jsx

@@ -2,8 +2,6 @@ import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 
-import { IntlProvider } from 'react-intl';
-
 import { fromJS } from 'immutable';
 
 import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
@@ -14,17 +12,14 @@ import Audio from 'mastodon/features/audio';
 import Card from 'mastodon/features/status/components/card';
 import MediaModal from 'mastodon/features/ui/components/media_modal';
 import Video from 'mastodon/features/video';
-import { getLocale, onProviderError } from 'mastodon/locales';
+import { IntlProvider } from 'mastodon/locales';
 import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
 
-const { messages } = getLocale();
-
 const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };
 
 export default class MediaContainer extends PureComponent {
 
   static propTypes = {
-    locale: PropTypes.string.isRequired,
     components: PropTypes.object.isRequired,
   };
 
@@ -73,7 +68,7 @@ export default class MediaContainer extends PureComponent {
   };
 
   render () {
-    const { locale, components } = this.props;
+    const { components } = this.props;
 
     let handleOpenVideo;
 
@@ -83,7 +78,7 @@ export default class MediaContainer extends PureComponent {
     }
 
     return (
-      <IntlProvider locale={locale} messages={messages} onError={onProviderError}>
+      <IntlProvider>
         <>
           {[].map.call(components, (component, i) => {
             const componentName = component.getAttribute('data-component');

app/javascript/mastodon/locales/global_locale.ts

@@ -0,0 +1,22 @@
+export interface LocaleData {
+  locale: string;
+  messages: Record<string, string>;
+}
+
+let loadedLocale: LocaleData;
+
+export function setLocale(locale: LocaleData) {
+  loadedLocale = locale;
+}
+
+export function getLocale() {
+  if (!loadedLocale && process.env.NODE_ENV === 'development') {
+    throw new Error('getLocale() called before any locale has been set');
+  }
+
+  return loadedLocale;
+}
+
+export function isLocaleLoaded() {
+  return !!loadedLocale;
+}

app/javascript/mastodon/locales/index.ts

@@ -0,0 +1,5 @@
+export type { LocaleData } from './global_locale';
+export { setLocale, getLocale, isLocaleLoaded } from './global_locale';
+export { loadLocale } from './load_locale';
+
+export { IntlProvider } from './intl_provider';

app/javascript/mastodon/locales/intl_provider.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+
+import { IntlProvider as BaseIntlProvider } from 'react-intl';
+
+import { getLocale, isLocaleLoaded } from './global_locale';
+import { loadLocale } from './load_locale';
+
+function onProviderError(error: unknown) {
+  // 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 (
+    error &&
+    typeof error === 'object' &&
+    error instanceof Error &&
+    error.message.match('MISSING_DATA')
+  ) {
+    console.warn(error.message);
+  }
+
+  console.error(error);
+}
+
+export const IntlProvider: React.FC<
+  Omit<React.ComponentProps<typeof BaseIntlProvider>, 'locale' | 'messages'>
+> = ({ children, ...props }) => {
+  const [localeLoaded, setLocaleLoaded] = useState(false);
+
+  useEffect(() => {
+    async function loadLocaleData() {
+      if (!isLocaleLoaded()) {
+        await loadLocale();
+      }
+
+      setLocaleLoaded(true);
+    }
+    void loadLocaleData();
+  }, []);
+
+  if (!localeLoaded) return null;
+
+  const { locale, messages } = getLocale();
+
+  return (
+    <BaseIntlProvider
+      locale={locale}
+      messages={messages}
+      onError={onProviderError}
+      {...props}
+    >
+      {children}
+    </BaseIntlProvider>
+  );
+};

app/javascript/mastodon/locales/load_locale.ts

@@ -0,0 +1,29 @@
+import { Semaphore } from 'async-mutex';
+
+import type { LocaleData } from './global_locale';
+import { isLocaleLoaded, setLocale } from './global_locale';
+
+const localeLoadingSemaphore = new Semaphore(1);
+
+export async function loadLocale() {
+  const locale = document.querySelector<HTMLElement>('html')?.lang || 'en';
+
+  // We use a Semaphore here so only one thing can try to load the locales at
+  // the same time. If one tries to do it while its in progress, it will wait
+  // for the initial load to finish before it is resumed (and will see that locale
+  // data is already loaded)
+  await localeLoadingSemaphore.runExclusive(async () => {
+    // if the locale is already set, then do nothing
+    if (isLocaleLoaded()) return;
+
+    const localeData = (await import(
+      /* webpackMode: "lazy" */
+      /* webpackChunkName: "locale/[request]" */
+      /* webpackInclude: /\.json$/ */
+      /* webpackPreload: true */
+      `mastodon/locales/${locale}.json`
+    )) as LocaleData['messages'];
+
+    setLocale({ messages: localeData, locale });
+  });
+}