Skip to content

Fix i18n interpolation #432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 21, 2022
Merged

Fix i18n interpolation #432

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 16 additions & 20 deletions src/language-helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import counterpart from "counterpart";

import type Store from 'electron-store';

const DEFAULT_LOCALE = "en";
const FALLBACK_LOCALE = 'en';

export function _td(text: string): string {
return text;
Expand All @@ -32,9 +32,7 @@ interface IVariables {
}

export function _t(text: string, variables: IVariables = {}): string {
const args = Object.assign({ interpolate: false }, variables);

const { count } = args;
const { count } = variables;

// Horrible hack to avoid https://github.com/vector-im/element-web/issues/4191
// The interpolation library that counterpart uses does not support undefined/null
Expand All @@ -43,21 +41,20 @@ export function _t(text: string, variables: IVariables = {}): string {
// valid ES6 template strings to i18n strings it's extremely easy to pass undefined/null
// if there are no existing null guards. To avoid this making the app completely inoperable,
// we'll check all the values for undefined/null and stringify them here.
Object.keys(args).forEach((key) => {
if (args[key] === undefined) {
Object.keys(variables).forEach((key) => {
if (variables[key] === undefined) {
console.warn("safeCounterpartTranslate called with undefined interpolation name: " + key);
args[key] = 'undefined';
variables[key] = 'undefined';
}
if (args[key] === null) {
if (variables[key] === null) {
console.warn("safeCounterpartTranslate called with null interpolation name: " + key);
args[key] = 'null';
variables[key] = 'null';
}
});
let translated = counterpart.translate(text, args);
if (translated === undefined && count !== undefined) {
// counterpart does not do fallback if no pluralisation exists
// in the preferred language, so do it here
translated = counterpart.translate(text, Object.assign({}, args, { locale: DEFAULT_LOCALE }));
let translated = counterpart.translate(text, variables);
if (!translated && count !== undefined) {
// counterpart does not do fallback if no pluralisation exists in the preferred language, so do it here
translated = counterpart.translate(text, { ...variables, locale: FALLBACK_LOCALE });
}

// The translation returns text so there's no XSS vector here (no unsafe HTML, no code execution)
Expand All @@ -75,8 +72,8 @@ export class AppLocalization {
private readonly localizedComponents?: Set<Component>;

constructor({ store, components = [] }: { store: TypedStore, components: Component[] }) {
counterpart.registerTranslations("en", this.fetchTranslationJson("en_EN"));
counterpart.setFallbackLocale('en');
counterpart.registerTranslations(FALLBACK_LOCALE, this.fetchTranslationJson("en_EN"));
counterpart.setFallbackLocale(FALLBACK_LOCALE);
counterpart.setSeparator('|');

if (Array.isArray(components)) {
Expand Down Expand Up @@ -122,16 +119,15 @@ export class AppLocalization {
locales = [locales];
}

locales.forEach(locale => {
const loadedLocales = locales.filter(locale => {
const translations = this.fetchTranslationJson(locale);
if (translations !== null) {
counterpart.registerTranslations(locale, translations);
}
return !!translations;
});

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - this looks like a bug but is out of scope for this conversion
counterpart.setLocale(locales);
counterpart.setLocale(loadedLocales[0]);
this.store.set(AppLocalization.STORE_KEY, locales);

this.resetLocalizedUI();
Expand Down