i18n API (#3549)

* i18n API

* add readme to locales/locales/

chrome/environment.js

@@ -1,5 +1,6 @@
 /* eslint-env webextensions */
 
+import '../locales/asChromeI18n';
 import { createMessageHandler } from '../lib/environment/_messaging';
 import { extendDeep, keyedMutex } from '../lib/utils';
 import { apiToPromise } from './_helpers';
@@ -79,3 +80,5 @@ addInterceptor('storage', keyedMutex(async ([operation, key, value]) => {
 			throw new Error(`Invalid storage operation: ${operation}`);
 	}
 }, ([, key]) => key || '__all_keys__'));
+
+addInterceptor('i18n', ([messageName, substitutions]) => chrome.i18n.getMessage(messageName, substitutions));

chrome/manifest.json

@@ -4,6 +4,7 @@
 	"manifest_version": 2,
 	"minimum_chrome_version": "54",
 	"description": "{{prop?description!../package.json}}",
+	"default_locale": "en",
 	"background": {
 		"scripts": [
 			"{{./background.entry.js}}"

edge/manifest.json

@@ -3,6 +3,7 @@
 	"version": "{{prop?version!../package.json}}",
 	"minimum_edge_version": "38.14393.0.0",
 	"description": "{{prop?description!../package.json}}",
+	"default_locale": "en",
 	"author": "{{prop?author!../package.json}}",
 	"background": {
 		"scripts": [

firefox/environment.js

@@ -1,4 +1,5 @@
 import { createMessageHandler } from '../lib/environment/_messaging';
+import { getMessage } from '../lib/environment/_mockI18n';
 
 const {
 	_handleMessage,
@@ -19,3 +20,4 @@ export {
 };
 
 addInterceptor('permissions', () => true);
+addInterceptor('i18n', ([messageName, substitutions]) => getMessage(messageName, substitutions));

lib/environment/_mockI18n.js

@@ -0,0 +1,18 @@
+import { locales, DEFAULT_LOCALE } from '../../locales/asJson';
+import { locale } from '../utils/localization';
+
+export function getMessage(messageName, substitutions) {
+	const { message } = (
+		locales[locale()] && locales[locale()][messageName] ||
+		DEFAULT_LOCALE[messageName] ||
+		{ message: '' }
+	);
+
+	// Replace direct references to substitutions, e.g. `First substitution: $1`
+	// Maximum of 9 substitutions allowed, i.e. only one number after the `$`
+	return message.replace(/\$(\d)\b(?!\$)/g, (match, number) => substitutions[number - 1] || '');
+
+	// Chrome also supports named placeholders, e.g. `Error: $error_message$`
+	// but Transifex does not create the `placeholders` field in exported JSON
+	// https://developer.chrome.com/extensions/i18n#examples-getMessage
+}

lib/environment/i18n.js

@@ -0,0 +1,6 @@
+import { sendSynchronous } from 'browserEnvironment';
+
+export function i18n(messageName, ...substitutions) {
+	// implementation should return the empty string if it cannot find a translation
+	return sendSynchronous('i18n', [messageName, substitutions]) || messageName;
+}

lib/environment/index.js

@@ -3,6 +3,7 @@ import './alert';
 export { addURLToHistory, isURLVisited } from './history';
 export { ajax } from './ajax';
 export { deleteCookies } from './cookies';
+export { i18n } from './i18n';
 export { isPrivateBrowsing } from './privateBrowsing';
 export { launchAuthFlow } from './auth';
 export { multicast } from './multicast';

lib/utils/localization.js

@@ -4,7 +4,7 @@ import moment from 'moment';
 const redditLanguages = new Set(['en', 'ar', 'be', 'bg', 'bs', 'ca', 'cs', 'da', 'de', 'el', 'en-au', 'en-ca', 'en-gb', 'en-us', 'eo', 'es', 'es-ar', 'et', 'eu', 'fa', 'fi', 'fr', 'gd', 'he', 'hi', 'hr', 'hu', 'hy', 'id', 'is', 'it', 'ja', 'kn_IN', 'ko', 'la', 'lt', 'lv', 'nl', 'nn', 'no', 'pir', 'pl', 'pt', 'pt-pt', 'pt_BR', 'ro', 'ru', 'sk', 'sl', 'sr', 'sr-la', 'sv', 'ta', 'th', 'tr', 'uk', 'vi', 'zh']);
 
 // some locales incorrectly use _ as a delimiter
-const locale = _.once(() => {
+export const locale = _.once(() => {
 	const userLocale = (
 		typeof document !== 'undefined' && redditLanguages.has(document.documentElement.getAttribute('lang')) && document.documentElement.getAttribute('lang') ||
 		typeof navigator !== 'undefined' && navigator.language ||

locales/asChromeI18n.js

@@ -0,0 +1 @@
+require.context('file?name=_locales/[name]/messages.json!./locales', false, /\.json$/);

locales/asJson.js

@@ -0,0 +1,12 @@
+const localesContext = require.context('json!./locales', false, /\.json$/);
+
+export DEFAULT_LOCALE from 'json!./locales/en.json';
+
+function localeNameFromPath(path) {
+	return (/\/(\w+)\.json/).exec(path)[1];
+}
+
+export const locales = localesContext.keys().reduce((obj, key) => {
+	obj[localeNameFromPath(key)] = localesContext(key);
+	return obj;
+}, {});

locales/locales/README.md

@@ -0,0 +1,9 @@
+# Localization
+
+**Do not edit the files in this directory, they are automatically generated.**
+
+[Instead, visit Transifex if you wish to submit translations.](https://www.transifex.com/reddit-enhancement-suite/reddit-enhancement-suite/)
+
+## New strings
+
+New strings should be added to `en.json` and only that file.

locales/locales/en.json

@@ -0,0 +1,2 @@
+{
+}

safari/environment.js

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import resCss from '../lib/css/res.scss';
 
 import { createMessageHandler } from '../lib/environment/_messaging';
+import { getMessage } from '../lib/environment/_mockI18n';
 import * as Init from '../lib/core/init';
 
 // DOM Collection iteration
@@ -59,3 +60,5 @@ addInterceptor('isURLVisited', () => false);
 
 // Safari has no pageAction
 addInterceptor('pageAction', () => {});
+
+addInterceptor('i18n', ([messageName, substitutions]) => getMessage(messageName, substitutions));