Skip to content

Commit

Permalink
feat(compiler): add "original" placeholder value on extracted XMB (an…
Browse files Browse the repository at this point in the history 
…gular#25079)

Update XMB placeholders(<ph>) to include the original value on top of an
example. Placeholders can by definition have one example(<ex>) tag and a
text node. The text node is used by TC as the "original" value from the
placeholder, while the example should represent a dummy value.
For example: <ph name="PET"><ex>Gopher</ex>{{ petName }}</ph>.
This change makes sure that we have the original text, but it *DOES NOT*
make sure that the example is correct. The example has the same wrong
behavior of showing the interpolation text rather than a useful
example.

No breaking changes, but tools that depend on the previous behavior and
don't consider the full XMB definition may fail to parse the XMB.
Fixes b/72565847

PR Close angular#25079
  • Loading branch information
@Goodwine @FrederikSchlemmer
Goodwine authored and FrederikSchlemmer committed Jan 3, 2019
1 parent e8d001a commit 8dd129a
Show file tree
Hide file tree
Showing 6 changed files with 171 additions and 39 deletions.
1 change: 1 addition & 0 deletions packages/compiler-cli/test/BUILD.bazel
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ jasmine_node_test(
],
deps = [
":extract_i18n_lib",
"//packages/common:npm_package",
"//packages/core",
"//tools/testing:node",
],
Expand Down
122 changes: 119 additions & 3 deletions packages/compiler-cli/test/extract_i18n_spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,15 @@ const EXPECTED_XMB = `<?xml version="1.0" encoding="UTF-8" ?>
<msg id="8136548302122759730" desc="desc" meaning="meaning"><source>src/basic.html:1</source><source>src/comp2.ts:1</source><source>src/basic.html:1</source>translate me</msg>
<msg id="9038505069473852515"><source>src/basic.html:3,4</source><source>src/comp2.ts:3,4</source><source>src/comp2.ts:2,3</source><source>src/basic.html:3,4</source>
Welcome</msg>
<msg id="5611534349548281834" desc="with ICU"><source>src/icu.html:1,3</source><source>src/icu.html:5</source>{VAR_PLURAL, plural, =1 {book} other {books} }</msg>
<msg id="5811701742971715242" desc="with ICU and other things"><source>src/icu.html:4,6</source>
foo <ph name="ICU"><ex>{ count, plural, =1 {...} other {...}}</ex>{ count, plural, =1 {...} other {...}}</ph>
</msg>
<msg id="7254052530614200029" desc="with placeholders"><source>src/placeholders.html:1</source>Name: <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex>&lt;b&gt;</ph><ph name="NAME"><ex>{{
name // i18n(ph=&quot;name&quot;)
}}</ex>{{
name // i18n(ph=&quot;name&quot;)
}}</ph><ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</ph></msg>
</messagebundle>
`;

Expand Down Expand Up @@ -90,6 +99,41 @@ const EXPECTED_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
<context context-type="linenumber">3</context>
</context-group>
</trans-unit>
<trans-unit id="83937c05b1216e7f4c02a85454260e28fd72d1e3" datatype="html">
<source>{VAR_PLURAL, plural, =1 {book} other {books} }</source>
<context-group purpose="location">
<context context-type="sourcefile">src/icu.html</context>
<context context-type="linenumber">1</context>
</context-group>
<note priority="1" from="description">with ICU</note>
</trans-unit>
<trans-unit id="540c5f481129419ef21017f396b6c2d0869ca4d2" datatype="html">
<source>
foo <x id="ICU" equiv-text="{ count, plural, =1 {...} other {...}}"/>
</source>
<context-group purpose="location">
<context context-type="sourcefile">src/icu.html</context>
<context context-type="linenumber">4</context>
</context-group>
<note priority="1" from="description">with ICU and other things</note>
</trans-unit>
<trans-unit id="ca7678090fddd04441d63b1218177af65f23342d" datatype="html">
<source>{VAR_PLURAL, plural, =1 {book} other {books} }</source>
<context-group purpose="location">
<context context-type="sourcefile">src/icu.html</context>
<context context-type="linenumber">5</context>
</context-group>
</trans-unit>
<trans-unit id="9311399c1ca7c75f771d77acb129e50581c6ec1f" datatype="html">
<source>Name: <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="NAME" equiv-text="{{
name // i18n(ph=&quot;name&quot;)
}}"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/placeholders.html</context>
<context context-type="linenumber">1</context>
</context-group>
<note priority="1" from="description">with placeholders</note>
</trans-unit>
</body>
</file>
</xliff>
Expand Down Expand Up @@ -122,6 +166,38 @@ const EXPECTED_XLIFF2 = `<?xml version="1.0" encoding="UTF-8" ?>
Welcome</source>
</segment>
</unit>
<unit id="5611534349548281834">
<notes>
<note category="description">with ICU</note>
<note category="location">src/icu.html:1,3</note>
<note category="location">src/icu.html:5</note>
</notes>
<segment>
<source>{VAR_PLURAL, plural, =1 {book} other {books} }</source>
</segment>
</unit>
<unit id="5811701742971715242">
<notes>
<note category="description">with ICU and other things</note>
<note category="location">src/icu.html:4,6</note>
</notes>
<segment>
<source>
foo <ph id="0" equiv="ICU" disp="{ count, plural, =1 {...} other {...}}"/>
</source>
</segment>
</unit>
<unit id="7254052530614200029">
<notes>
<note category="description">with placeholders</note>
<note category="location">src/placeholders.html:1</note>
</notes>
<segment>
<source>Name: <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><ph id="1" equiv="NAME" disp="{{
name // i18n(ph=&quot;name&quot;)
}}"/></pc></source>
</segment>
</unit>
</file>
</xliff>
`;
Expand All @@ -132,7 +208,7 @@ describe('extract_i18n command line', () => {
let write: (fileName: string, content: string) => void;
let errorSpy: jasmine.Spy&((s: string) => void);

function writeConfig(tsconfig: string = '{"extends": "./tsconfig-base.json"}') {
function writeConfig(tsconfig = '{"extends": "./tsconfig-base.json"}') {
write('tsconfig.json', tsconfig);
}

Expand All @@ -147,7 +223,7 @@ describe('extract_i18n command line', () => {
basePath = makeTempDir();
write = (fileName: string, content: string) => {
const dir = path.dirname(fileName);
if (dir != '.') {
if (dir !== '.') {
const newDir = path.join(basePath, dir);
if (!fs.existsSync(newDir)) fs.mkdirSync(newDir);
}
Expand Down Expand Up @@ -223,14 +299,54 @@ describe('extract_i18n command line', () => {
})
export class BasicCmp3 {}`);

write('src/placeholders.html', `<div i18n="with placeholders">Name: <b>{{
name // i18n(ph="name")
}}</b></div>`);

write('src/placeholder_cmp.ts', `
import {Component} from '@angular/core';
@Component({
selector: 'placeholders',
templateUrl: './placeholders.html',
})
export class PlaceholderCmp { name = 'whatever'; }`);

write('src/icu.html', `<div i18n="with ICU">{
count, plural, =1 {book} other {books}
}</div>
<div i18n="with ICU and other things">
foo { count, plural, =1 {book} other {books} }
</div>`);

write('src/icu_cmp.ts', `
import {Component} from '@angular/core';
@Component({
selector: 'icu',
templateUrl: './icu.html',
})
export class IcuCmp { count = 3; }`);

write('src/module.ts', `
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {BasicCmp1} from './comp1';
import {BasicCmp2, BasicCmp4} from './comp2';
import {BasicCmp3} from './comp3';
import {PlaceholderCmp} from './placeholder_cmp';
import {IcuCmp} from './icu_cmp';
@NgModule({
declarations: [BasicCmp1, BasicCmp2, BasicCmp3, BasicCmp4]
declarations: [
BasicCmp1,
BasicCmp2,
BasicCmp3,
BasicCmp4,
PlaceholderCmp,
IcuCmp,
],
imports: [CommonModule],
})
export class I18nModule {}
`);
Expand Down
41 changes: 28 additions & 13 deletions packages/compiler/src/i18n/serializers/xmb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import * as xml from './xml_helper';
const _MESSAGES_TAG = 'messagebundle';
const _MESSAGE_TAG = 'msg';
const _PLACEHOLDER_TAG = 'ph';
const _EXEMPLE_TAG = 'ex';
const _EXAMPLE_TAG = 'ex';
const _SOURCE_TAG = 'source';

const _DOCTYPE = `<!ELEMENT messagebundle (msg)*>
Expand Down Expand Up @@ -115,30 +115,45 @@ class _Visitor implements i18n.Visitor {
}

visitTagPlaceholder(ph: i18n.TagPlaceholder, context?: any): xml.Node[] {
const startEx = new xml.Tag(_EXEMPLE_TAG, {}, [new xml.Text(`<${ph.tag}>`)]);
const startTagPh = new xml.Tag(_PLACEHOLDER_TAG, {name: ph.startName}, [startEx]);
const startTagAsText = new xml.Text(`<${ph.tag}>`);
const startEx = new xml.Tag(_EXAMPLE_TAG, {}, [startTagAsText]);
// TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
const startTagPh =
new xml.Tag(_PLACEHOLDER_TAG, {name: ph.startName}, [startEx, startTagAsText]);
if (ph.isVoid) {
// void tags have no children nor closing tags
return [startTagPh];
}

const closeEx = new xml.Tag(_EXEMPLE_TAG, {}, [new xml.Text(`</${ph.tag}>`)]);
const closeTagPh = new xml.Tag(_PLACEHOLDER_TAG, {name: ph.closeName}, [closeEx]);
const closeTagAsText = new xml.Text(`</${ph.tag}>`);
const closeEx = new xml.Tag(_EXAMPLE_TAG, {}, [closeTagAsText]);
// TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
const closeTagPh =
new xml.Tag(_PLACEHOLDER_TAG, {name: ph.closeName}, [closeEx, closeTagAsText]);

return [startTagPh, ...this.serialize(ph.children), closeTagPh];
}

visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
const exTag = new xml.Tag(_EXEMPLE_TAG, {}, [new xml.Text(`{{${ph.value}}}`)]);
return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag])];
const interpolationAsText = new xml.Text(`{{${ph.value}}}`);
// Example tag needs to be not-empty for TC.
const exTag = new xml.Tag(_EXAMPLE_TAG, {}, [interpolationAsText]);
return [
// TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag, interpolationAsText])
];
}

visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {
const exTag = new xml.Tag(_EXEMPLE_TAG, {}, [
new xml.Text(
`{${ph.value.expression}, ${ph.value.type}, ${Object.keys(ph.value.cases).map((value: string) => value + ' {...}').join(' ')}}`)
]);
return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag])];
const icuExpression = ph.value.expression;
const icuType = ph.value.type;
const icuCases = Object.keys(ph.value.cases).map((value: string) => value + ' {...}').join(' ');
const icuAsText = new xml.Text(`{${icuExpression}, ${icuType}, ${icuCases}}`);
const exTag = new xml.Tag(_EXAMPLE_TAG, {}, [icuAsText]);
return [
// TC requires PH to have a non empty EX, and uses the text node to show the "original" value.
new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag, icuAsText])
];
}

serialize(nodes: i18n.Node[]): xml.Node[] {
Expand All @@ -161,7 +176,7 @@ class ExampleVisitor implements xml.IVisitor {
if (tag.name === _PLACEHOLDER_TAG) {
if (!tag.children || tag.children.length == 0) {
const exText = new xml.Text(tag.attrs['name'] || '...');
tag.children = [new xml.Tag(_EXEMPLE_TAG, {}, [exText])];
tag.children = [new xml.Tag(_EXAMPLE_TAG, {}, [exText])];
}
} else if (tag.children) {
tag.children.forEach(node => node.visit(this));
Expand Down
32 changes: 16 additions & 16 deletions packages/compiler/test/i18n/integration_xmb_xtb_spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,32 +91,32 @@ const XTB = `
const XMB = `<msg id="615790887472569365"><source>file.ts:3</source>i18n attribute on tags</msg>
<msg id="3707494640264351337"><source>file.ts:5</source>nested</msg>
<msg id="5539162898278769904" meaning="different meaning"><source>file.ts:7</source>nested</msg>
<msg id="3780349238193953556"><source>file.ts:9</source><source>file.ts:10</source><ph name="START_ITALIC_TEXT"><ex>&lt;i&gt;</ex></ph>with placeholders<ph name="CLOSE_ITALIC_TEXT"><ex>&lt;/i&gt;</ex></ph></msg>
<msg id="5415448997399451992"><source>file.ts:11</source><ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph>with <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph>nested<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph> placeholders<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph></msg>
<msg id="3780349238193953556"><source>file.ts:9</source><source>file.ts:10</source><ph name="START_ITALIC_TEXT"><ex>&lt;i&gt;</ex>&lt;i&gt;</ph>with placeholders<ph name="CLOSE_ITALIC_TEXT"><ex>&lt;/i&gt;</ex>&lt;/i&gt;</ph></msg>
<msg id="5415448997399451992"><source>file.ts:11</source><ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph>with <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph>nested<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph> placeholders<ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph></msg>
<msg id="5525133077318024839"><source>file.ts:14</source>on not translatable node</msg>
<msg id="2174788525135228764"><source>file.ts:14</source>&lt;b&gt;bold&lt;/b&gt;</msg>
<msg id="8670732454866344690"><source>file.ts:15</source>on translatable node</msg>
<msg id="4593805537723189714"><source>file.ts:20</source><source>file.ts:37</source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
<msg id="4593805537723189714"><source>file.ts:20</source><source>file.ts:37</source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex>&lt;b&gt;</ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</ph>} }</msg>
<msg id="703464324060964421"><source>file.ts:22,24</source>
<ph name="ICU"><ex>{sex, select, male {...} female {...} other {...}}</ex></ph>
<ph name="ICU"><ex>{sex, select, male {...} female {...} other {...}}</ex>{sex, select, male {...} female {...} other {...}}</ph>
</msg>
<msg id="5430374139308914421"><source>file.ts:23</source>{VAR_SELECT, select, male {m} female {f} other {other} }</msg>
<msg id="1300564767229037107"><source>file.ts:25,27</source>
<ph name="ICU"><ex>{sexB, select, male {...} female {...}}</ex></ph>
<ph name="ICU"><ex>{sexB, select, male {...} female {...}}</ex>{sexB, select, male {...} female {...}}</ph>
</msg>
<msg id="2500580913783245106"><source>file.ts:26</source>{VAR_SELECT, select, male {m} female {f} }</msg>
<msg id="4851788426695310455"><source>file.ts:29</source><ph name="INTERPOLATION"><ex>{{ &quot;count = &quot; + count }}</ex></ph></msg>
<msg id="9013357158046221374"><source>file.ts:30</source>sex = <ph name="INTERPOLATION"><ex>{{ sex }}</ex></ph></msg>
<msg id="8324617391167353662"><source>file.ts:31</source><ph name="CUSTOM_NAME"><ex>{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}</ex></ph></msg>
<msg id="4851788426695310455"><source>file.ts:29</source><ph name="INTERPOLATION"><ex>{{ &quot;count = &quot; + count }}</ex>{{ &quot;count = &quot; + count }}</ph></msg>
<msg id="9013357158046221374"><source>file.ts:30</source>sex = <ph name="INTERPOLATION"><ex>{{ sex }}</ex>{{ sex }}</ph></msg>
<msg id="8324617391167353662"><source>file.ts:31</source><ph name="CUSTOM_NAME"><ex>{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}</ex>{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}</ph></msg>
<msg id="7685649297917455806"><source>file.ts:36</source><source>file.ts:54</source>in a translatable section</msg>
<msg id="2329001734457059408"><source>file.ts:34,38</source>
<ph name="START_HEADING_LEVEL1"><ex>&lt;h1&gt;</ex></ph>Markers in html comments<ph name="CLOSE_HEADING_LEVEL1"><ex>&lt;/h1&gt;</ex></ph>
<ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
<ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex></ph><ph name="ICU"><ex>{count, plural, =0 {...} =1 {...} =2 {...} other {...}}</ex></ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
<ph name="START_HEADING_LEVEL1"><ex>&lt;h1&gt;</ex>&lt;h1&gt;</ph>Markers in html comments<ph name="CLOSE_HEADING_LEVEL1"><ex>&lt;/h1&gt;</ex>&lt;/h1&gt;</ph>
<ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph>
<ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex>&lt;div&gt;</ph><ph name="ICU"><ex>{count, plural, =0 {...} =1 {...} =2 {...} other {...}}</ex>{count, plural, =0 {...} =1 {...} =2 {...} other {...}}</ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex>&lt;/div&gt;</ph>
</msg>
<msg id="1491627405349178954"><source>file.ts:40</source>it <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>should<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> work</msg>
<msg id="1491627405349178954"><source>file.ts:40</source>it <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex>&lt;b&gt;</ph>should<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</ph> work</msg>
<msg id="i18n16"><source>file.ts:42</source>with an explicit ID</msg>
<msg id="i18n17"><source>file.ts:43</source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
<msg id="4085484936881858615" desc="desc"><source>file.ts:46,52</source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph name="INTERPOLATION"><ex>{{response.getItemsList().length}}</ex></ph> results} }</msg>
<msg id="4035252431381981115"><source>file.ts:54</source>foo<ph name="START_LINK"><ex>&lt;a&gt;</ex></ph>bar<ph name="CLOSE_LINK"><ex>&lt;/a&gt;</ex></ph></msg>
<msg id="5339604010413301604"><source>file.ts:56</source><ph name="MAP_NAME"><ex>{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}</ex></ph></msg>`;
<msg id="i18n17"><source>file.ts:43</source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex>&lt;b&gt;</ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex>&lt;/b&gt;</ph>} }</msg>
<msg id="4085484936881858615" desc="desc"><source>file.ts:46,52</source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph name="INTERPOLATION"><ex>{{response.getItemsList().length}}</ex>{{response.getItemsList().length}}</ph> results} }</msg>
<msg id="4035252431381981115"><source>file.ts:54</source>foo<ph name="START_LINK"><ex>&lt;a&gt;</ex>&lt;a&gt;</ph>bar<ph name="CLOSE_LINK"><ex>&lt;/a&gt;</ex>&lt;/a&gt;</ph></msg>
<msg id="5339604010413301604"><source>file.ts:56</source><ph name="MAP_NAME"><ex>{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}</ex>{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}</ph></msg>`;

0 comments on commit 8dd129a

Please sign in to comment.