fix(ivy): update ICU placeholders format to match Closure compiler (#31459)

Since `goog.getMsg` does not process ICUs (post-processing is required via goog.i18n.MessageFormat, https://google.github.io/closure-library/api/goog.i18n.MessageFormat.html) and placeholder format used for ICUs and regular messages inside `goog.getMsg` are different, the current implementation (that assumed the same placeholder format) needs to be updated. This commit updates placeholder format used inside ICUs from `{$placeholder}` to `{PLACEHOLDER}` to better align with Closure. ICU placeholders (that were left as is prior to this commit) are now replaced with actual values in post-processing step (inside `i18nPostprocess`).

PR Close #31459
This commit is contained in:
Andrew Kushnir
2019-07-08 17:37:26 -07:00
committed by Matias Niemelä
parent 6da1446afc
commit dee16a4355
7 changed files with 185 additions and 106 deletions

View File

@ -967,25 +967,30 @@ describe('i18n support in the view compiler', () => {
it('should support named interpolations', () => {
const input = `
<div i18n>Some value: {{ valueA // i18n(ph="PH_A") }}</div>
<div i18n>
Named interpolation: {{ valueA // i18n(ph="PH_A") }}
Named interpolation with spaces: {{ valueB // i18n(ph="PH B") }}
</div>
`;
const output = String.raw `
var $I18N_0$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_2817319788724342848$$APP_SPEC_TS_0$ = goog.getMsg("Some value: {$phA}", {
"phA": "\uFFFD0\uFFFD"
const $MSG_EXTERNAL_7597881511811528589$$APP_SPEC_TS_0$ = goog.getMsg(" Named interpolation: {$phA} Named interpolation with spaces: {$phB} ", {
"phA": "\uFFFD0\uFFFD",
"phB": "\uFFFD1\uFFFD"
});
$I18N_0$ = $MSG_EXTERNAL_2817319788724342848$$APP_SPEC_TS_0$;
$I18N_0$ = $MSG_EXTERNAL_7597881511811528589$$APP_SPEC_TS_0$;
}
else {
$I18N_0$ = $r3$.ɵɵi18nLocalize("Some value: {$phA}", {
"phA": "\uFFFD0\uFFFD"
$I18N_0$ = $r3$.ɵɵi18nLocalize(" Named interpolation: {$phA} Named interpolation with spaces: {$phB} ", {
"phA": "\uFFFD0\uFFFD",
"phB": "\uFFFD1\uFFFD"
});
}
consts: 2,
vars: 1,
vars: 2,
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
@ -994,7 +999,7 @@ describe('i18n support in the view compiler', () => {
}
if (rf & 2) {
$r3$.ɵɵselect(1);
$r3$.ɵɵi18nExp(ctx.valueA);
$r3$.ɵɵi18nExp(ctx.valueA)(ctx.valueB);
$r3$.ɵɵi18nApply(1);
}
}
@ -2609,18 +2614,15 @@ describe('i18n support in the view compiler', () => {
const $_c3$ = ["title", "icu and text"];
var $I18N_5$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_1922743304863699161$$APP_SPEC_TS__5$ = goog.getMsg("{VAR_SELECT, select, 0 {no emails} 1 {one email} other {{$interpolation} emails}}", {
"interpolation": "\uFFFD1\uFFFD"
});
const $MSG_EXTERNAL_1922743304863699161$$APP_SPEC_TS__5$ = goog.getMsg("{VAR_SELECT, select, 0 {no emails} 1 {one email} other {{INTERPOLATION} emails}}");
$I18N_5$ = $MSG_EXTERNAL_1922743304863699161$$APP_SPEC_TS__5$;
}
else {
$I18N_5$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, 0 {no emails} 1 {one email} other {{$interpolation} emails}}", {
"interpolation": "\uFFFD1\uFFFD"
});
$I18N_5$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, 0 {no emails} 1 {one email} other {{INTERPOLATION} emails}}");
}
$I18N_5$ = $r3$.ɵɵi18nPostprocess($I18N_5$, {
"VAR_SELECT": "\uFFFD0\uFFFD"
"VAR_SELECT": "\uFFFD0\uFFFD",
"INTERPOLATION": "\uFFFD1\uFFFD"
});
function MyComponent_div_3_Template(rf, ctx) {
if (rf & 1) {
@ -2671,18 +2673,15 @@ describe('i18n support in the view compiler', () => {
const output = String.raw `
var $I18N_0$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_2949673783721159566$$APP_SPEC_TS_0$ = goog.getMsg("{VAR_SELECT, select, 10 {ten} 20 {twenty} other {{$interpolation}}}", {
"interpolation": "\uFFFD1\uFFFD"
});
const $MSG_EXTERNAL_2949673783721159566$$APP_SPEC_TS_0$ = goog.getMsg("{VAR_SELECT, select, 10 {ten} 20 {twenty} other {{INTERPOLATION}}}");
$I18N_0$ = $MSG_EXTERNAL_2949673783721159566$$APP_SPEC_TS_0$;
}
else {
$I18N_0$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, 10 {ten} 20 {twenty} other {{$interpolation}}}", {
"interpolation": "\uFFFD1\uFFFD"
});
$I18N_0$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, 10 {ten} 20 {twenty} other {{INTERPOLATION}}}");
}
$I18N_0$ = $r3$.ɵɵi18nPostprocess($I18N_0$, {
"VAR_SELECT": "\uFFFD0\uFFFD"
"VAR_SELECT": "\uFFFD0\uFFFD",
"INTERPOLATION": "\uFFFD1\uFFFD"
});
template: function MyComponent_Template(rf, ctx) {
@ -2714,28 +2713,20 @@ describe('i18n support in the view compiler', () => {
const output = String.raw `
var $I18N_1$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_2417296354340576868$$APP_SPEC_TS_1$ = goog.getMsg("{VAR_SELECT, select, male {male - {$startBoldText}male{$closeBoldText}} female {female {$startBoldText}female{$closeBoldText}} other {{$startTagDiv}{$startItalicText}other{$closeItalicText}{$closeTagDiv}}}", {
"startBoldText": "<b>",
"closeBoldText": "</b>",
"startItalicText": "<i>",
"closeItalicText": "</i>",
"startTagDiv": "<div class=\"other\">",
"closeTagDiv": "</div>"
});
const $MSG_EXTERNAL_2417296354340576868$$APP_SPEC_TS_1$ = goog.getMsg("{VAR_SELECT, select, male {male - {START_BOLD_TEXT}male{CLOSE_BOLD_TEXT}} female {female {START_BOLD_TEXT}female{CLOSE_BOLD_TEXT}} other {{START_TAG_DIV}{START_ITALIC_TEXT}other{CLOSE_ITALIC_TEXT}{CLOSE_TAG_DIV}}}");
$I18N_1$ = $MSG_EXTERNAL_2417296354340576868$$APP_SPEC_TS_1$;
}
else {
$I18N_1$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male - {$startBoldText}male{$closeBoldText}} female {female {$startBoldText}female{$closeBoldText}} other {{$startTagDiv}{$startItalicText}other{$closeItalicText}{$closeTagDiv}}}", {
"startBoldText": "<b>",
"closeBoldText": "</b>",
"startItalicText": "<i>",
"closeItalicText": "</i>",
"startTagDiv": "<div class=\"other\">",
"closeTagDiv": "</div>"
});
$I18N_1$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male - {START_BOLD_TEXT}male{CLOSE_BOLD_TEXT}} female {female {START_BOLD_TEXT}female{CLOSE_BOLD_TEXT}} other {{START_TAG_DIV}{START_ITALIC_TEXT}other{CLOSE_ITALIC_TEXT}{CLOSE_TAG_DIV}}}");
}
$I18N_1$ = $r3$.ɵɵi18nPostprocess($I18N_1$, {
"VAR_SELECT": "\uFFFD0\uFFFD"
"VAR_SELECT": "\uFFFD0\uFFFD",
"START_BOLD_TEXT": "<b>",
"CLOSE_BOLD_TEXT": "</b>",
"START_ITALIC_TEXT": "<i>",
"CLOSE_ITALIC_TEXT": "</i>",
"START_TAG_DIV": "<div class=\"other\">",
"CLOSE_TAG_DIV": "</div>"
});
const $_c2$ = [1, "other"];
var $I18N_0$;
@ -2795,18 +2786,15 @@ describe('i18n support in the view compiler', () => {
const output = String.raw `
var $I18N_0$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_6879461626778511059$$APP_SPEC_TS_0$ = goog.getMsg("{VAR_SELECT, select, male {male of age: {$interpolation}} female {female} other {other}}", {
"interpolation": "\uFFFD1\uFFFD"
});
const $MSG_EXTERNAL_6879461626778511059$$APP_SPEC_TS_0$ = goog.getMsg("{VAR_SELECT, select, male {male of age: {INTERPOLATION}} female {female} other {other}}");
$I18N_0$ = $MSG_EXTERNAL_6879461626778511059$$APP_SPEC_TS_0$;
}
else {
$I18N_0$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male of age: {$interpolation}} female {female} other {other}}", {
"interpolation": "\uFFFD1\uFFFD"
});
$I18N_0$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male of age: {INTERPOLATION}} female {female} other {other}}");
}
$I18N_0$ = $r3$.ɵɵi18nPostprocess($I18N_0$, {
"VAR_SELECT": "\uFFFD0\uFFFD"
"VAR_SELECT": "\uFFFD0\uFFFD",
"INTERPOLATION": "\uFFFD1\uFFFD"
});
consts: 2,
@ -3148,36 +3136,29 @@ describe('i18n support in the view compiler', () => {
const output = String.raw `
var $I18N_1$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_7825031864601787094$$APP_SPEC_TS_1$ = goog.getMsg("{VAR_SELECT, select, male {male {$interpolation}} female {female {$interpolation_1}} other {other}}", {
"interpolation": "\uFFFD1\uFFFD",
"interpolation_1": "\uFFFD2\uFFFD"
});
const $MSG_EXTERNAL_7825031864601787094$$APP_SPEC_TS_1$ = goog.getMsg("{VAR_SELECT, select, male {male {INTERPOLATION}} female {female {INTERPOLATION_1}} other {other}}");
$I18N_1$ = $MSG_EXTERNAL_7825031864601787094$$APP_SPEC_TS_1$;
}
else {
$I18N_1$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male {$interpolation}} female {female {$interpolation_1}} other {other}}", {
"interpolation": "\uFFFD1\uFFFD",
"interpolation_1": "\uFFFD2\uFFFD"
});
$I18N_1$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male {INTERPOLATION}} female {female {INTERPOLATION_1}} other {other}}");
}
$I18N_1$ = $r3$.ɵɵi18nPostprocess($I18N_1$, {
"VAR_SELECT": "\uFFFD0\uFFFD"
"VAR_SELECT": "\uFFFD0\uFFFD",
"INTERPOLATION": "\uFFFD1\uFFFD",
"INTERPOLATION_1": "\uFFFD2\uFFFD"
});
const $_c0$ = [${AttributeMarker.Template}, "ngIf"];
var $I18N_3$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_2310343208266678305$$APP_SPEC_TS__3$ = goog.getMsg("{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other: {$interpolation}}}", {
"interpolation": "\uFFFD1:1\uFFFD"
});
const $MSG_EXTERNAL_2310343208266678305$$APP_SPEC_TS__3$ = goog.getMsg("{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other: {INTERPOLATION}}}");
$I18N_3$ = $MSG_EXTERNAL_2310343208266678305$$APP_SPEC_TS__3$;
}
else {
$I18N_3$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other: {$interpolation}}}", {
"interpolation": "\uFFFD1:1\uFFFD"
});
$I18N_3$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other: {INTERPOLATION}}}");
}
$I18N_3$ = $r3$.ɵɵi18nPostprocess($I18N_3$, {
"VAR_SELECT": "\uFFFD0:1\uFFFD"
"VAR_SELECT": "\uFFFD0:1\uFFFD",
"INTERPOLATION": "\uFFFD1:1\uFFFD"
});
var $I18N_0$;
if (ngI18nClosureMode) {
@ -3239,29 +3220,24 @@ describe('i18n support in the view compiler', () => {
select,
male {male {{ weight // i18n(ph="PH_A") }}}
female {female {{ height // i18n(ph="PH_B") }}}
other {other {{ age // i18n(ph="PH_C") }}}
other {other {{ age // i18n(ph="PH WITH SPACES") }}}
}</div>
`;
const output = String.raw `
var $I18N_0$;
if (ngI18nClosureMode) {
const $MSG_EXTERNAL_4853189513362404940$$APP_SPEC_TS_0$ = goog.getMsg("{VAR_SELECT, select, male {male {$phA}} female {female {$phB}} other {other {$phC}}}", {
"phA": "\uFFFD1\uFFFD",
"phB": "\uFFFD2\uFFFD",
"phC": "\uFFFD3\uFFFD"
});
$I18N_0$ = $MSG_EXTERNAL_4853189513362404940$$APP_SPEC_TS_0$;
const $MSG_EXTERNAL_6318060397235942326$$APP_SPEC_TS_0$ = goog.getMsg("{VAR_SELECT, select, male {male {PH_A}} female {female {PH_B}} other {other {PH_WITH_SPACES}}}");
$I18N_0$ = $MSG_EXTERNAL_6318060397235942326$$APP_SPEC_TS_0$;
}
else {
$I18N_0$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male {$phA}} female {female {$phB}} other {other {$phC}}}", {
"phA": "\uFFFD1\uFFFD",
"phB": "\uFFFD2\uFFFD",
"phC": "\uFFFD3\uFFFD"
});
$I18N_0$ = $r3$.ɵɵi18nLocalize("{VAR_SELECT, select, male {male {PH_A}} female {female {PH_B}} other {other {PH_WITH_SPACES}}}");
}
$I18N_0$ = $r3$.ɵɵi18nPostprocess($I18N_0$, {
"VAR_SELECT": "\uFFFD0\uFFFD"
"VAR_SELECT": "\uFFFD0\uFFFD",
"PH_A": "\uFFFD1\uFFFD",
"PH_B": "\uFFFD2\uFFFD",
"PH_WITH_SPACES": "\uFFFD3\uFFFD"
});
consts: 2,