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}`
);
}
}