feat(compiler): add representation of placeholders to xliff & xmb

Closes angular#17345
ocombe · Jul 12, 2017 · a772d95 · a772d95
1 parent edb8375
commit a772d95
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 28 deletions.
diff --git a/packages/compiler/src/i18n/serializers/xliff.ts b/packages/compiler/src/i18n/serializers/xliff.ts
@@ -139,19 +139,21 @@ class _WriteVisitor implements i18n.Visitor {
   visitTagPlaceholder(ph: i18n.TagPlaceholder, context?: any): xml.Node[] {
     const ctype = getCtypeForTag(ph.tag);
 
-    const startTagPh = new xml.Tag(_PLACEHOLDER_TAG, {id: ph.startName, ctype});
     if (ph.isVoid) {
       // void tags have no children nor closing tags
-      return [startTagPh];
+      return [new xml.Tag(_PLACEHOLDER_TAG, {id: ph.startName, ctype, disp: `<${ph.tag}/>`})];
     }
 
+    const startTagPh = new xml.Tag(
+        _PLACEHOLDER_TAG,
+        {id: ph.startName, ctype, dispStart: `<${ph.tag}>`, dispEnd: `</${ph.tag}>`});
     const closeTagPh = new xml.Tag(_PLACEHOLDER_TAG, {id: ph.closeName, ctype});
 
     return [startTagPh, ...this.serialize(ph.children), closeTagPh];
   }
 
   visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
-    return [new xml.Tag(_PLACEHOLDER_TAG, {id: ph.name})];
+    return [new xml.Tag(_PLACEHOLDER_TAG, {id: ph.name, disp: `{{${ph.value}}}`})];
   }
 
   visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {

diff --git a/packages/compiler/src/i18n/serializers/xmb.ts b/packages/compiler/src/i18n/serializers/xmb.ts
@@ -129,7 +129,8 @@ class _Visitor implements i18n.Visitor {
   }
 
   visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
-    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name})];
+    const exTag = new xml.Tag(_EXEMPLE_TAG, {}, [new xml.Text(`{{${ph.value}}}` || '...')]);
+    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name}, [exTag])];
   }
 
   visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {

diff --git a/packages/compiler/test/i18n/integration_xliff_spec.ts b/packages/compiler/test/i18n/integration_xliff_spec.ts
@@ -186,7 +186,7 @@ const XLIFF_EXTRACTED = `
         <note priority="1" from="meaning">different meaning</note>
       </trans-unit>
       <trans-unit id="34fec9cc62e28e8aa6ffb306fa8569ef0a8087fe" datatype="html">
-        <source><x id="START_ITALIC_TEXT" ctype="x-i"/>with placeholders<x id="CLOSE_ITALIC_TEXT" ctype="x-i"/></source>
+        <source><x id="START_ITALIC_TEXT" ctype="x-i" dispStart="&lt;i&gt;" dispEnd="&lt;/i&gt;"/>with placeholders<x id="CLOSE_ITALIC_TEXT" ctype="x-i"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
@@ -214,7 +214,7 @@ const XLIFF_EXTRACTED = `
         </context-group>
       </trans-unit>
       <trans-unit id="dc5536bb9e0e07291c185a0d306601a2ecd4813f" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
@@ -262,23 +262,23 @@ const XLIFF_EXTRACTED = `
         </context-group>
       </trans-unit>
       <trans-unit id="d9879678f727b244bc7c7e20f22b63d98cb14890" datatype="html">
-        <source><x id="INTERPOLATION"/></source>
+        <source><x id="INTERPOLATION" disp="{{ &quot;count = &quot; + count }}"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
           <context context-type="linenumber">28</context>
         </context-group>
       </trans-unit>
       <trans-unit id="50dac33dc6fc0578884baac79d875785ed77c928" datatype="html">
-        <source>sex = <x id="INTERPOLATION"/></source>
+        <source>sex = <x id="INTERPOLATION" disp="{{ sex }}"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
           <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a46f833b1fe6ca49e8b97c18f4b7ea0b930c9383" datatype="html">
-        <source><x id="CUSTOM_NAME"/></source>
+        <source><x id="CUSTOM_NAME" disp="{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
@@ -299,9 +299,9 @@ const XLIFF_EXTRACTED = `
       </trans-unit>
       <trans-unit id="eee74a5be8a75881a4785905bd8302a71f7d9f75" datatype="html">
         <source>
-    <x id="START_HEADING_LEVEL1" ctype="x-h1"/>Markers in html comments<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1"/>   
-    <x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
-    <x id="START_TAG_DIV_1" ctype="x-div"/><x id="ICU"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
+    <x id="START_HEADING_LEVEL1" ctype="x-h1" dispStart="&lt;h1&gt;" dispEnd="&lt;/h1&gt;"/>Markers in html comments<x id="CLOSE_HEADING_LEVEL1" ctype="x-h1"/>   
+    <x id="START_TAG_DIV" ctype="x-div" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
+    <x id="START_TAG_DIV_1" ctype="x-div" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"/><x id="ICU"/><x id="CLOSE_TAG_DIV" ctype="x-div"/>
 </source>
         <target/>
         <context-group purpose="location">
@@ -310,7 +310,7 @@ const XLIFF_EXTRACTED = `
         </context-group>
       </trans-unit>
       <trans-unit id="93a30c67d4e6c9b37aecfe2ac0f2b5d366d7b520" datatype="html">
-        <source>it <x id="START_BOLD_TEXT" ctype="x-b"/>should<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> work</source>
+        <source>it <x id="START_BOLD_TEXT" ctype="x-b" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"/>should<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> work</source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
@@ -326,15 +326,15 @@ const XLIFF_EXTRACTED = `
         </context-group>
       </trans-unit>
       <trans-unit id="i18n17" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
+        <source>{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<x id="START_BOLD_TEXT" ctype="x-b" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"/>many<x id="CLOSE_BOLD_TEXT" ctype="x-b"/>} }</source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
           <context context-type="linenumber">42</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2370d995bdcc1e7496baa32df20654aff65c2d10" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <x id="INTERPOLATION"/> results} }</source>
+        <source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <x id="INTERPOLATION" disp="{{response.getItemsList().length}}"/> results} }</source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
@@ -343,15 +343,15 @@ const XLIFF_EXTRACTED = `
         <note priority="1" from="description">desc</note>
       </trans-unit>
       <trans-unit id="296ab5eab8d370822488c152586db3a5875ee1a2" datatype="html">
-        <source>foo<x id="START_LINK" ctype="x-a"/>bar<x id="CLOSE_LINK" ctype="x-a"/></source>
+        <source>foo<x id="START_LINK" ctype="x-a" dispStart="&lt;a&gt;" dispEnd="&lt;/a&gt;"/>bar<x id="CLOSE_LINK" ctype="x-a"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
           <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2e013b311caa0916478941a985887e091d8288b6" datatype="html">
-        <source><x id="MAP NAME"/></source>
+        <source><x id="MAP NAME" disp="{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>

diff --git a/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts b/packages/compiler/test/i18n/integration_xmb_xtb_spec.ts
@@ -95,9 +95,9 @@ const XMB = ` <msg id="615790887472569365"><source>file.ts:3</source>i18n attrib
         <ph name="ICU"><ex>ICU</ex></ph>
     </msg>
   <msg id="5868084092545682515"><source>file.ts:22</source><source>file.ts:25</source>{VAR_SELECT, select, m {male} f {female} }</msg>
-  <msg id="4851788426695310455"><source>file.ts:28</source><ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
-  <msg id="9013357158046221374"><source>file.ts:29</source>sex = <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
-  <msg id="8324617391167353662"><source>file.ts:30</source><ph name="CUSTOM_NAME"><ex>CUSTOM_NAME</ex></ph></msg>
+  <msg id="4851788426695310455"><source>file.ts:28</source><ph name="INTERPOLATION"><ex>{{ &quot;count = &quot; + count }}</ex></ph></msg>
+  <msg id="9013357158046221374"><source>file.ts:29</source>sex = <ph name="INTERPOLATION"><ex>{{ sex }}</ex></ph></msg>
+  <msg id="8324617391167353662"><source>file.ts:30</source><ph name="CUSTOM_NAME"><ex>{{ &quot;custom name&quot; //i18n(ph=&quot;CUSTOM_NAME&quot;) }}</ex></ph></msg>
   <msg id="7685649297917455806"><source>file.ts:35</source><source>file.ts:53</source>in a translatable section</msg>
   <msg id="2387287228265107305"><source>file.ts:33,37</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>   
@@ -107,6 +107,6 @@ const XMB = ` <msg id="615790887472569365"><source>file.ts:3</source>i18n attrib
   <msg id="1491627405349178954"><source>file.ts:39</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="i18n16"><source>file.ts:41</source>with an explicit ID</msg>
   <msg id="i18n17"><source>file.ts:42</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:45,51</source>{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph> results} }</msg>
+  <msg id="4085484936881858615" desc="desc"><source>file.ts:45,51</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:53</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:55</source><ph name="MAP_NAME"><ex>MAP_NAME</ex></ph></msg>`;
+  <msg id="5339604010413301604"><source>file.ts:55</source><ph name="MAP_NAME"><ex>{{ &apos;test&apos; //i18n(ph=&quot;map name&quot;) }}</ex></ph></msg>`;
diff --git a/packages/compiler/test/i18n/serializers/xliff_spec.ts b/packages/compiler/test/i18n/serializers/xliff_spec.ts
@@ -42,15 +42,15 @@ const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         </context-group>
       </trans-unit>
       <trans-unit id="ec1d033f2436133c14ab038286c4f5df4697484a" datatype="html">
-        <source>translatable element <x id="START_BOLD_TEXT" ctype="x-b"/>with placeholders<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> <x id="INTERPOLATION"/></source>
+        <source>translatable element <x id="START_BOLD_TEXT" ctype="x-b" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"/>with placeholders<x id="CLOSE_BOLD_TEXT" ctype="x-b"/> <x id="INTERPOLATION" disp="{{ interpolation}}"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
           <context context-type="linenumber">3</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e2ccf3d131b15f54aa1fcf1314b1ca77c14bfcc2" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {<x id="START_PARAGRAPH" ctype="x-p"/>test<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} }</source>
+        <source>{VAR_PLURAL, plural, =0 {<x id="START_PARAGRAPH" ctype="x-p" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;"/>test<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} }</source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
@@ -90,7 +90,7 @@ const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         </context-group>
       </trans-unit>
       <trans-unit id="d7fa2d59aaedcaa5309f13028c59af8c85b8c49d" datatype="html">
-        <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
+        <source><x id="LINE_BREAK" ctype="lb" disp="&lt;br/&gt;"/><x id="TAG_IMG" ctype="image" disp="&lt;img/&gt;"/><x id="START_TAG_DIV" ctype="x-div" dispStart="&lt;div&gt;" dispEnd="&lt;/div&gt;"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
@@ -99,15 +99,15 @@ const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         <note priority="1" from="description">ph names</note>
       </trans-unit>
       <trans-unit id="baz" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>
           <context context-type="linenumber">10</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0e16a673a5a7a135c9f7b957ec2c5c6f6ee6e2c4" datatype="html">
-        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<x id="START_PARAGRAPH" ctype="x-p" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;"/>deeply nested<x id="CLOSE_PARAGRAPH" ctype="x-p"/>} } } }</source>
         <target/>
         <context-group purpose="location">
           <context context-type="sourcefile">file.ts</context>

diff --git a/packages/compiler/test/i18n/serializers/xmb_spec.ts b/packages/compiler/test/i18n/serializers/xmb_spec.ts
@@ -48,7 +48,7 @@ lines</p>`;
 <!ELEMENT ex (#PCDATA)>
 ]>
 <messagebundle>
-  <msg id="7056919470098446707"><source>file.ts:3</source>translatable element <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>with placeholders<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
+  <msg id="7056919470098446707"><source>file.ts:3</source>translatable element <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>with placeholders<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> <ph name="INTERPOLATION"><ex>{{ interpolation}}</ex></ph></msg>
   <msg id="2981514368455622387"><source>file.ts:4</source>{VAR_PLURAL, plural, =0 {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>test<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} }</msg>
   <msg id="7999024498831672133" desc="d" meaning="m"><source>file.ts:5</source>foo</msg>
   <msg id="i" desc="d" meaning="m"><source>file.ts:6</source>foo</msg>