function _checkPattern()

in packages/fxa-react/lib/utils.tsx [199:259]


function _checkPattern(
  bundle: FluentBundle,
  pattern: Pattern,
  fallbackText: string,
  ftlArgs?: Record<string, FluentVariable>
) {
  const errors: Error[] = [];
  const ftlMsg = bundle.formatPattern(pattern, ftlArgs, errors);

  // Try to render the message, and check for any errors. This will catch things like missing parameters.
  if (errors.length > 0) {
    throw new Error(
      `Errors encountered formatting fluent message. Fluent errors: ${errors
        .map((x) => x.message)
        .join('\n')}`
    );
  }

  // We allow for .includes because fallback text comes from `textContent` within the `FtlMsg` wrapper which may contain
  // more than one component and string. Also note that strings must be 'cleaned' because the ftlMsg may have invisible
  // control characters that can break the includes check.
  if (!_clean(fallbackText).includes(_clean(ftlMsg))) {
    throw new Error(
      `Fallback text does not match Fluent message.\nFallback text: ${fallbackText}\nFluent message: ${ftlMsg}`
    );
  }

  let inDomOverlay = false;
  for (let i = 0; i < ftlMsg.length; i++) {
    if (!inDomOverlay && ftlMsg[i] === '<') {
      // Start of dom overlay tag
      inDomOverlay = true;
    } else if (inDomOverlay && ftlMsg[i] === '>') {
      // End of dom overlay tag
      inDomOverlay = false;
    } else if (inDomOverlay && ftlMsg[i] === '<') {
      throw new Error(
        `Fluent message contains a '<' character inside a dom overlay tag. Check that dom overlay is well formed. Fluent message: ${ftlMsg}`
      );
    } else if (!inDomOverlay && ftlMsg[i] === '>') {
      throw new Error(
        `Fluent message contains a '>' character that doesn't appear to be part of a dom tag. Either encode with html entity or check dom overlay is well formed. Fluent message: ${ftlMsg}`
      );
    } else if (!inDomOverlay && ftlMsg[i] === "'") {
      throw new Error(
        `Fluent message contains a straight apostrophe (') and must be updated to its curly equivalent (’). Fluent message: ${ftlMsg}`
      );
    } else if (!inDomOverlay && ftlMsg[i] === '"') {
      throw new Error(
        `Fluent message contains a straight quote (") and must be updated to its curly equivalent (“”). Fluent message: ${ftlMsg}`
      );
    }
  }

  // Edge case non-closed dom overlay tag
  if (inDomOverlay) {
    throw new Error(
      `Fluent message contains start of dom overlay with no end tag. Ensue dom overlay is well formed. Fluent message: ${ftlMsg}`
    );
  }
}