Skip to content

Commit

Permalink
i18n: introduce script to swap in new locale to LHR (#8755)
Browse files Browse the repository at this point in the history
  • Loading branch information
paulirish authored Jun 25, 2019
1 parent f13e549 commit d3d3828
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 5 deletions.
26 changes: 22 additions & 4 deletions lighthouse-core/lib/i18n/i18n.js
Original file line number Diff line number Diff line change
Expand Up @@ -170,24 +170,26 @@ function _preprocessMessageValues(icuMessage, values) {
/** @type {Map<string, IcuMessageInstance[]>} */
const _icuMessageInstanceMap = new Map();

const _ICUMsgNotFoundMsg = 'ICU message not found in destination locale';
/**
*
* @param {LH.Locale} locale
* @param {string} icuMessageId
* @param {string} icuMessage
* @param {string=} fallbackMessage
* @param {*} [values]
* @return {{formattedString: string, icuMessage: string}}
*/
function _formatIcuMessage(locale, icuMessageId, icuMessage, values) {
function _formatIcuMessage(locale, icuMessageId, fallbackMessage, values) {
const localeMessages = LOCALES[locale];
const localeMessage = localeMessages[icuMessageId] && localeMessages[icuMessageId].message;
// fallback to the original english message if we couldn't find a message in the specified locale
// better to have an english message than no message at all, in some number cases it won't even matter
const messageForMessageFormat = localeMessage || icuMessage;
const messageForMessageFormat = localeMessage || fallbackMessage;
if (messageForMessageFormat === undefined) throw new Error(_ICUMsgNotFoundMsg);
// when using accented english, force the use of a different locale for number formatting
const localeForMessageFormat = locale === 'en-XA' ? 'de-DE' : locale;
// pre-process values for the message format like KB and milliseconds
const valuesForMessageFormat = _preprocessMessageValues(icuMessage, values);
const valuesForMessageFormat = _preprocessMessageValues(messageForMessageFormat, values);

const formatter = new MessageFormat(messageForMessageFormat, localeForMessageFormat, formats);
const formattedString = formatter.format(valuesForMessageFormat);
Expand Down Expand Up @@ -283,6 +285,20 @@ function getFormatted(icuMessageIdOrRawString, locale) {
return icuMessageIdOrRawString;
}

/**
* @param {LH.Locale} locale
* @param {string} icuMessageId
* @param {*} [values]
* @return {string}
*/
function getFormattedFromIdAndValues(locale, icuMessageId, values) {
const icuMessageIdRegex = /(.* \| .*)$/;
if (!icuMessageIdRegex.test(icuMessageId)) throw new Error('This is not an ICU message ID');

const {formattedString} = _formatIcuMessage(locale, icuMessageId, undefined, values);
return formattedString;
}

/**
* @param {string} icuMessageInstanceId
* @param {LH.Locale} locale
Expand Down Expand Up @@ -350,11 +366,13 @@ function replaceIcuMessageInstanceIds(inputObject, locale) {

module.exports = {
_formatPathAsString,
_ICUMsgNotFoundMsg,
UIStrings,
lookupLocale,
getRendererFormattedStrings,
createMessageInstanceIdFn,
getFormatted,
getFormattedFromIdAndValues,
replaceIcuMessageInstanceIds,
isIcuMessage,
};
92 changes: 92 additions & 0 deletions lighthouse-core/lib/i18n/swap-locale.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/**
* @license Copyright 2019 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
'use strict';

const _set = require('lodash.set');

const i18n = require('./i18n.js');

/**
* @fileoverview Use the lhr.i18n.icuMessagePaths object to change locales
*
* `icuMessagePaths` is an object keyed by `icuMessageId`s. Within each is either
* 1) an array of strings, which are just object paths to where that message is used in the LHR
* 2) an array of `LH.I18NMessageValuesEntry`s which include both a `path` and a `values` object
* which will be used in the replacement within `i18n._formatIcuMessage()`
*
* An example:
"icuMessagePaths": {
"lighthouse-core/audits/metrics/first-contentful-paint.js | title": [
"audits[first-contentful-paint].title"
],
"lighthouse-core/audits/time-to-first-byte.js | displayValue": [
{
"values": {
"timeInMs": 570.5630000000001
},
"path": "audits[time-to-first-byte].displayValue"
}
],
"lighthouse-core/lib/i18n/i18n.js | columnTimeSpent": [
"audits[mainthread-work-breakdown].details.headings[1].text",
"audits[network-rtt].details.headings[1].text",
"audits[network-server-latency].details.headings[1].text"
],
...
*/

/**
* Returns a new LHR with all strings changed to the new `requestedLocale`.
* @param {LH.Result} lhr
* @param {LH.Locale} requestedLocale
* @return {{lhr: LH.Result, missingIcuMessageIds: string[]}}
*/
function swapLocale(lhr, requestedLocale) {
// Copy LHR to avoid mutating provided LHR.
lhr = JSON.parse(JSON.stringify(lhr));

const locale = i18n.lookupLocale(requestedLocale);
const {icuMessagePaths} = lhr.i18n;
const missingIcuMessageIds = /** @type {string[]} */([]);

Object.entries(icuMessagePaths).forEach(([icuMessageId, messageInstancesInLHR]) => {
for (const instance of messageInstancesInLHR) {
// The path that _formatPathAsString() generated
let path;
let values;
if (typeof instance === 'string') {
path = instance;
} else {
path = instance.path;
// `values` are the string template values to be used. eg. `values: {wastedBytes: 9028}`
values = instance.values;
}
// If we couldn't find the new replacement message, keep things as is.
try {
// Get new formatted strings in revised locale
const formattedStr = i18n.getFormattedFromIdAndValues(locale, icuMessageId, values);
// Write string back into the LHR
_set(lhr, path, formattedStr);
} catch (err) {
if (err.message === i18n._ICUMsgNotFoundMsg) {
missingIcuMessageIds.push(icuMessageId);
} else {
throw err;
}
}
}
});

lhr.i18n.rendererFormattedStrings = i18n.getRendererFormattedStrings(locale);
// Tweak the config locale
lhr.configSettings.locale = locale;
return {
lhr,
missingIcuMessageIds,
};
}

module.exports = swapLocale;
76 changes: 76 additions & 0 deletions lighthouse-core/test/lib/i18n/swap-locale-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/**
* @license Copyright 2019 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
'use strict';

const swapLocale = require('../../../lib/i18n/swap-locale.js');

const lhr = require('../../results/sample_v2.json');

/* eslint-env jest */
describe('swap-locale', () => {
it('can change golden LHR english strings into spanish', () => {
const lhrEn = /** @type {LH.Result} */ (JSON.parse(JSON.stringify(lhr)));
const lhrEs = swapLocale(lhrEn, 'es').lhr;

// Basic replacement
expect(lhrEn.audits.plugins.title).toEqual('Document avoids plugins');
expect(lhrEs.audits.plugins.title).toEqual('El documento no usa complementos');

// With ICU string argument values
expect(lhrEn.audits['dom-size'].displayValue).toEqual('31 elements');
expect(lhrEs.audits['dom-size'].displayValue).toEqual('31 elementos');

// Renderer formatted strings
expect(lhrEn.i18n.rendererFormattedStrings.labDataTitle).toEqual('Lab Data');
expect(lhrEs.i18n.rendererFormattedStrings.labDataTitle).toEqual('Datos de prueba');
});

it('can roundtrip back to english correctly', () => {
const lhrEn = /** @type {LH.Result} */ (JSON.parse(JSON.stringify(lhr)));

// via Spanish
const lhrEnEsRT = swapLocale(swapLocale(lhrEn, 'es').lhr, 'en-US').lhr;
expect(lhrEnEsRT).toEqual(lhrEn);

// via Arabic
const lhrEnArRT = swapLocale(swapLocale(lhrEn, 'ar').lhr, 'en-US').lhr;
expect(lhrEnArRT).toEqual(lhrEn);
});

it('leaves alone messages where there is no translation available', () => {
const miniLHR = {
audits: {
redirects: {
id: 'redirects',
title: 'Avoid multiple page redirects',
},
fakeaudit: {
id: 'fakeaudit',
title: 'An audit without translations',
},
},
configSettings: {
locale: 'en-US',
},
i18n: {
icuMessagePaths: {
'lighthouse-core/audits/redirects.js | title': ['audits.redirects.title'],
'lighthouse-core/audits/redirects.js | doesntExist': ['audits.redirects.doesntExist'],
'lighthouse-core/audits/fakeaudit.js | title': ['audits.fakeaudit.title'],
},
},
};
const {missingIcuMessageIds} = swapLocale(miniLHR, 'es');

// Updated strings are not found, so these remain in the original language
expect(missingIcuMessageIds).toMatchInlineSnapshot(`
Array [
"lighthouse-core/audits/redirects.js | doesntExist",
"lighthouse-core/audits/fakeaudit.js | title",
]
`);
});
});
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"@types/jest": "^24.0.9",
"@types/jpeg-js": "^0.3.0",
"@types/lodash.isequal": "^4.5.2",
"@types/lodash.set": "^4.3.6",
"@types/make-dir": "^1.0.3",
"@types/mkdirp": "^0.5.2",
"@types/node": "*",
Expand Down Expand Up @@ -121,6 +122,7 @@
"isomorphic-fetch": "^2.2.1",
"jest": "^24.3.0",
"jsdom": "^12.2.0",
"lodash.set": "^4.3.2",
"make-dir": "^1.3.0",
"npm-run-posix-or-windows": "^2.0.2",
"nyc": "^13.3.0",
Expand Down
3 changes: 2 additions & 1 deletion types/lhr.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ declare global {
module LH {
export type LighthouseError = LHError;

export type I18NMessageEntry = string | {path: string, values: any};
export type I18NMessageValuesEntry = {path: string, values: Record<string, string | number>};
export type I18NMessageEntry = string | I18NMessageValuesEntry;

export interface I18NMessages {
[icuMessageId: string]: I18NMessageEntry[];
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,13 @@
dependencies:
"@types/lodash" "*"

"@types/lodash.set@^4.3.6":
version "4.3.6"
resolved "https://registry.yarnpkg.com/@types/lodash.set/-/lodash.set-4.3.6.tgz#33e635c2323f855359225df6a5c8c6f1f1908264"
integrity sha512-ZeGDDlnRYTvS31Laij0RsSaguIUSBTYIlJFKL3vm3T2OAZAQj2YpSvVWJc0WiG4jqg9fGX6PAPGvDqBcHfSgFg==
dependencies:
"@types/lodash" "*"

"@types/lodash@*":
version "4.14.106"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.106.tgz#6093e9a02aa567ddecfe9afadca89e53e5dce4dd"
Expand Down Expand Up @@ -5071,6 +5078,11 @@ lodash.memoize@~3.0.3:
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
integrity sha1-LcvSwofLwKVcxCMovQxzYVDVPj8=

lodash.set@^4.3.2:
version "4.3.2"
resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=

lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
Expand Down

0 comments on commit d3d3828

Please sign in to comment.