Refactor i18n/intl utils, support icu only, remove renderText

ts/components/Intl.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { ReactNode } from 'react';
 
 import type { FormatXMLElementFn } from 'intl-messageformat';
-import type { LocalizerType, RenderTextCallbackType } from '../types/Util';
+import type { LocalizerType } from '../types/Util';
 import type { ReplacementValuesType } from '../types/I18N';
 import * as log from '../logging/log';
 import { strictAssert } from '../util/assert';
@@ -23,118 +23,29 @@ export type Props = {
   id: string;
   i18n: LocalizerType;
   components?: IntlComponentsType;
-  renderText?: RenderTextCallbackType;
 };
 
-const defaultRenderText: RenderTextCallbackType = ({ text, key }) => (
-  <React.Fragment key={key}>{text}</React.Fragment>
-);
-
-export class Intl extends React.Component<Props> {
-  public getComponent(
-    index: number,
-    placeholderName: string,
-    key: number
-  ): JSX.Element | null {
-    const { id, components } = this.props;
-
-    if (!components) {
-      log.error(
-        `Error: Intl component prop not provided; Metadata: id '${id}', index ${index}, placeholder '${placeholderName}'`
-      );
-      return null;
-    }
-
-    if (Array.isArray(components)) {
-      if (!components || !components.length || components.length <= index) {
-        log.error(
-          `Error: Intl missing provided component for id '${id}', index ${index}`
-        );
-
-        return null;
-      }
-
-      return <React.Fragment key={key}>{components[index]}</React.Fragment>;
-    }
-
-    const value = components[placeholderName];
-    if (!value) {
-      log.error(
-        `Error: Intl missing provided component for id '${id}', placeholder '${placeholderName}'`
-      );
-
-      return null;
-    }
-
-    return <React.Fragment key={key}>{value}</React.Fragment>;
+export function Intl({
+  components,
+  id,
+  // Indirection for linter/migration tooling
+  i18n: localizer,
+}: Props): JSX.Element | null {
+  if (!id) {
+    log.error('Error: Intl id prop not provided');
+    return null;
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  public override render() {
-    const {
-      components,
-      id,
-      // Indirection for linter/migration tooling
-      i18n: localizer,
-      renderText = defaultRenderText,
-    } = this.props;
+  strictAssert(
+    !localizer.isLegacyFormat(id),
+    `Legacy message format is no longer supported ${id}`
+  );
 
-    if (!id) {
-      log.error('Error: Intl id prop not provided');
-      return null;
-    }
+  strictAssert(
+    !Array.isArray(components),
+    `components cannot be an array for ICU message ${id}`
+  );
 
-    if (!localizer.isLegacyFormat(id)) {
-      strictAssert(
-        !Array.isArray(components),
-        `components cannot be an array for ICU message ${id}`
-      );
-      const intl = localizer.getIntl();
-      return intl.formatMessage({ id }, components);
-    }
-
-    const text = localizer(id);
-    const results: Array<
-      string | JSX.Element | Array<string | JSX.Element> | null
-    > = [];
-    const FIND_REPLACEMENTS = /\$([^$]+)\$/g;
-
-    if (Array.isArray(components) && components.length > 1) {
-      throw new Error(
-        'Array syntax is not supported with more than one placeholder'
-      );
-    }
-
-    let componentIndex = 0;
-    let key = 0;
-    let lastTextIndex = 0;
-    let match = FIND_REPLACEMENTS.exec(text);
-
-    if (!match) {
-      return renderText({ text, key: 0 });
-    }
-
-    while (match) {
-      if (lastTextIndex < match.index) {
-        const textWithNoReplacements = text.slice(lastTextIndex, match.index);
-        results.push(renderText({ text: textWithNoReplacements, key }));
-        key += 1;
-      }
-
-      const placeholderName = match[1];
-      results.push(this.getComponent(componentIndex, placeholderName, key));
-      componentIndex += 1;
-      key += 1;
-
-      lastTextIndex = FIND_REPLACEMENTS.lastIndex;
-      match = FIND_REPLACEMENTS.exec(text);
-    }
-
-    if (lastTextIndex < text.length) {
-      results.push(renderText({ text: text.slice(lastTextIndex), key }));
-      key += 1;
-    }
-
-    return results;
-  }
+  const intl = localizer.getIntl();
+  return <>{intl.formatMessage({ id }, components, {})}</>;
 }