feat(i18n): xmb serializer

modules/@angular/compiler/src/html_parser.ts

@@ -140,8 +140,8 @@ class TreeBuilder {
 
     // read {
     if (this.peek.type !== HtmlTokenType.EXPANSION_CASE_EXP_START) {
-      this.errors.push(HtmlTreeError.create(
-          null, this.peek.sourceSpan, `Invalid ICU message. Missing '{'.`));
+      this.errors.push(
+          HtmlTreeError.create(null, this.peek.sourceSpan, `Invalid ICU message. Missing '{'.`));
       return null;
     }
 

modules/@angular/compiler/src/html_tags.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {isPresent, isBlank, normalizeBool, RegExpWrapper,} from '../src/facade/lang';
+import {normalizeBool, RegExpWrapper,} from '../src/facade/lang';
 
 // see http://www.w3.org/TR/html51/syntax.html#named-character-references
 // see https://html.spec.whatwg.org/multipage/entities.json
@@ -294,31 +294,32 @@ export class HtmlTagDefinition {
         isVoid?: boolean,
         ignoreFirstLf?: boolean
       } = {}) {
-    if (isPresent(closedByChildren) && closedByChildren.length > 0) {
+    if (closedByChildren && closedByChildren.length > 0) {
       closedByChildren.forEach(tagName => this.closedByChildren[tagName] = true);
     }
     this.isVoid = normalizeBool(isVoid);
     this.closedByParent = normalizeBool(closedByParent) || this.isVoid;
-    if (isPresent(requiredParents) && requiredParents.length > 0) {
+    if (requiredParents && requiredParents.length > 0) {
       this.requiredParents = {};
+      // The first parent is the list is automatically when none of the listed parents are present
       this.parentToAdd = requiredParents[0];
       requiredParents.forEach(tagName => this.requiredParents[tagName] = true);
     }
     this.implicitNamespacePrefix = implicitNamespacePrefix;
-    this.contentType = isPresent(contentType) ? contentType : HtmlTagContentType.PARSABLE_DATA;
+    this.contentType = contentType || HtmlTagContentType.PARSABLE_DATA;
     this.ignoreFirstLf = normalizeBool(ignoreFirstLf);
   }
 
   requireExtraParent(currentParent: string): boolean {
-    if (isBlank(this.requiredParents)) {
+    if (!this.requiredParents) {
       return false;
     }
 
-    if (isBlank(currentParent)) {
+    if (!currentParent) {
       return true;
     }
 
-    let lcParent = currentParent.toLowerCase();
+    const lcParent = currentParent.toLowerCase();
     return this.requiredParents[lcParent] != true && lcParent != 'template';
   }
 
@@ -382,20 +383,19 @@ var TAG_DEFINITIONS: {[key: string]: HtmlTagDefinition} = {
       {contentType: HtmlTagContentType.ESCAPABLE_RAW_TEXT, ignoreFirstLf: true}),
 };
 
-var DEFAULT_TAG_DEFINITION = new HtmlTagDefinition();
+const _DEFAULT_TAG_DEFINITION = new HtmlTagDefinition();
 
 export function getHtmlTagDefinition(tagName: string): HtmlTagDefinition {
-  var result = TAG_DEFINITIONS[tagName.toLowerCase()];
-  return isPresent(result) ? result : DEFAULT_TAG_DEFINITION;
+  return TAG_DEFINITIONS[tagName.toLowerCase()] || _DEFAULT_TAG_DEFINITION;
 }
 
-var NS_PREFIX_RE = /^:([^:]+):(.+)/g;
+const _NS_PREFIX_RE = /^:([^:]+):(.+)/g;
 
-export function splitNsName(elementName: string): string[] {
+export function splitNsName(elementName: string): [string, string] {
   if (elementName[0] != ':') {
     return [null, elementName];
   }
-  let match = RegExpWrapper.firstMatch(NS_PREFIX_RE, elementName);
+  const match = RegExpWrapper.firstMatch(_NS_PREFIX_RE, elementName);
   return [match[1], match[2]];
 }
 
@@ -404,5 +404,5 @@ export function getNsPrefix(elementName: string): string {
 }
 
 export function mergeNsAndName(prefix: string, localName: string): string {
-  return isPresent(prefix) ? `:${prefix}:${localName}` : localName;
+  return prefix ? `:${prefix}:${localName}` : localName;
 }

modules/@angular/compiler/src/i18n/catalog.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {HtmlParser} from '../html_parser';
+import {InterpolationConfig} from '../interpolation_config';
+
+import * as i18nAst from './i18n_ast';
+import {extractI18nMessages} from './i18n_parser';
+import {Serializer} from './serializers/serializer';
+
+export class Catalog {
+  private _messageMap: {[k: string]: i18nAst.Message} = {};
+
+  constructor(
+      private _htmlParser: HtmlParser, private _implicitTags: string[],
+      private _implicitAttrs: {[k: string]: string[]}) {}
+
+  public updateFromTemplate(html: string, url: string, interpolationConfig: InterpolationConfig):
+      void {
+    const htmlParserResult = this._htmlParser.parse(html, url, true, interpolationConfig);
+
+    if (htmlParserResult.errors.length) {
+      throw new Error();
+    }
+
+    const messages = extractI18nMessages(
+        htmlParserResult.rootNodes, interpolationConfig, this._implicitTags, this._implicitAttrs);
+
+    messages.forEach((message) => {
+      const id = strHash(serializeAst(message.nodes).join('') + `[${message.meaning}]`);
+      this._messageMap[id] = message;
+    });
+  }
+
+  public load(content: string, serializer: Serializer): void {
+    const nodeMap = serializer.load(content);
+    this._messageMap = {};
+
+    Object.getOwnPropertyNames(nodeMap).forEach(
+        (id) => { this._messageMap[id] = new i18nAst.Message(nodeMap[id], '', ''); });
+  }
+
+  public write(serializer: Serializer): string { return serializer.write(this._messageMap); }
+}
+
+
+/**
+ * String hash function similar to java.lang.String.hashCode().
+ * The hash code for a string is computed as
+ * s[0] * 31 ^ (n - 1) + s[1] * 31 ^ (n - 2) + ... + s[n - 1],
+ * where s[i] is the ith character of the string and n is the length of
+ * the string. We mod the result to make it between 0 (inclusive) and 2^32 (exclusive).
+ *
+ * Based on goog.string.hashCode from the Google Closure library
+ * https://github.com/google/closure-library/
+ *
+ * @internal
+ */
+// TODO(vicb): better algo (less collisions) ?
+export function strHash(str: string): string {
+  let result: number = 0;
+  for (var i = 0; i < str.length; ++i) {
+    // Normalize to 4 byte range, 0 ... 2^32.
+    result = (31 * result + str.charCodeAt(i)) >>> 0;
+  }
+  return result.toString(16);
+}
+
+/**
+ * Serialize the i18n ast to something xml-like in order to generate an UID.
+ *
+ * The visitor is also used in the i18n parser tests
+ *
+ * @internal
+ */
+class _SerializerVisitor implements i18nAst.Visitor {
+  visitText(text: i18nAst.Text, context: any): any { return text.value; }
+
+  visitContainer(container: i18nAst.Container, context: any): any {
+    return `[${container.children.map(child => child.visit(this)).join(', ')}]`;
+  }
+
+  visitIcu(icu: i18nAst.Icu, context: any): any {
+    let strCases = Object.keys(icu.cases).map((k: string) => `${k} {${icu.cases[k].visit(this)}}`);
+    return `{${icu.expression}, ${icu.type}, ${strCases.join(', ')}}`;
+  }
+
+  visitTagPlaceholder(ph: i18nAst.TagPlaceholder, context: any): any {
+    return ph.isVoid ?
+        `<ph tag name="${ph.startName}"/>` :
+        `<ph tag name="${ph.startName}">${ph.children.map(child => child.visit(this)).join(', ')}</ph name="${ph.closeName}">`;
+  }
+
+  visitPlaceholder(ph: i18nAst.Placeholder, context: any): any {
+    return `<ph name="${ph.name}">${ph.value}</ph>`;
+  }
+
+  visitIcuPlaceholder(ph: i18nAst.IcuPlaceholder, context?: any): any {
+    return `<ph icu name="${ph.name}">${ph.value.visit(this)}</ph>`;
+  }
+}
+
+const serializerVisitor = new _SerializerVisitor();
+
+export function serializeAst(ast: i18nAst.Node[]): string[] {
+  return ast.map(a => a.visit(serializerVisitor, null));
+}

modules/@angular/compiler/src/i18n/i18n_ast.ts

@@ -6,58 +6,53 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ParseSourceSpan} from "../parse_util";
+import {ParseSourceSpan} from '../parse_util';
 
-export interface I18nNode {
-  visit(visitor: Visitor, context?: any): any;
+export class Message {
+  constructor(public nodes: Node[], public meaning: string, public description: string) {}
 }
 
-export class Text implements I18nNode {
+export interface Node { visit(visitor: Visitor, context?: any): any; }
+
+export class Text implements Node {
   constructor(public value: string, public sourceSpan: ParseSourceSpan) {}
 
-  visit(visitor: Visitor, context?: any): any {
-    return visitor.visitText(this, context);
-  }
+  visit(visitor: Visitor, context?: any): any { return visitor.visitText(this, context); }
 }
 
-export class Container implements I18nNode {
-  constructor(public children: I18nNode[], public sourceSpan: ParseSourceSpan) {}
+export class Container implements Node {
+  constructor(public children: Node[], public sourceSpan: ParseSourceSpan) {}
 
-  visit(visitor: Visitor, context?: any): any {
-    return visitor.visitContainer(this, context);
-  }
+  visit(visitor: Visitor, context?: any): any { return visitor.visitContainer(this, context); }
 }
 
-export class Icu implements I18nNode {
-  constructor(public expression: string, public type: string, public cases: {[k: string]: I18nNode}, public sourceSpan: ParseSourceSpan) {}
+export class Icu implements Node {
+  constructor(
+      public expression: string, public type: string, public cases: {[k: string]: Node},
+      public sourceSpan: ParseSourceSpan) {}
 
-  visit(visitor: Visitor, context?: any): any {
-    return visitor.visitIcu(this, context);
-  }
+  visit(visitor: Visitor, context?: any): any { return visitor.visitIcu(this, context); }
 }
 
 export class TagPlaceholder {
-  constructor(public name: string, public attrs: {[k: string]: string}, public children: I18nNode[], public sourceSpan: ParseSourceSpan) {}
+  constructor(
+      public tag: string, public attrs: {[k: string]: string}, public startName: string,
+      public closeName: string, public children: Node[], public isVoid: boolean,
+      public sourceSpan: ParseSourceSpan) {}
 
-  visit(visitor: Visitor, context?: any): any {
-    return visitor.visitTagPlaceholder(this, context);
-  }
+  visit(visitor: Visitor, context?: any): any { return visitor.visitTagPlaceholder(this, context); }
 }
 
 export class Placeholder {
   constructor(public value: string, public name: string = '', public sourceSpan: ParseSourceSpan) {}
 
-  visit(visitor: Visitor, context?: any): any {
-    return visitor.visitPlaceholder(this, context);
-  }
+  visit(visitor: Visitor, context?: any): any { return visitor.visitPlaceholder(this, context); }
 }
 
 export class IcuPlaceholder {
   constructor(public value: Icu, public name: string = '', public sourceSpan: ParseSourceSpan) {}
 
-  visit(visitor: Visitor, context?: any): any {
-    return visitor.visitIcuPlaceholder(this, context);
-  }
+  visit(visitor: Visitor, context?: any): any { return visitor.visitIcuPlaceholder(this, context); }
 }
 
 export interface Visitor {
@@ -68,7 +63,3 @@ export interface Visitor {
   visitPlaceholder(ph: Placeholder, context?: any): any;
   visitIcuPlaceholder(ph: IcuPlaceholder, context?: any): any;
 }
-
-
-
-

modules/@angular/compiler/src/i18n/i18n_parser.ts

@@ -6,71 +6,79 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { extractAstMessages} from './extractor';
-import * as hAst from '../html_ast';
-import * as i18nAst from './i18n_ast';
-import {Parser as ExpressionParser} from '../expression_parser/parser';
 import {Lexer as ExpressionLexer} from '../expression_parser/lexer';
-import {ParseSourceSpan} from "../parse_util";
-import {HtmlAst} from "../html_ast";
-import {extractPlaceholderName} from "@angular/compiler/src/i18n/shared";
+import {Parser as ExpressionParser} from '../expression_parser/parser';
+import * as hAst from '../html_ast';
+import {getHtmlTagDefinition} from '../html_tags';
+import {InterpolationConfig} from '../interpolation_config';
+import {ParseSourceSpan} from '../parse_util';
 
-export class Message {
-  constructor(public nodes: i18nAst.I18nNode[], public meaning: string, public description: string) {}
-}
+import {extractAstMessages} from './extractor';
+import * as i18nAst from './i18n_ast';
+import {PlaceholderRegistry} from './serializers/util';
+import {extractPlaceholderName} from './shared';
 
-// TODO: should get the interpolation config
 export function extractI18nMessages(
-  sourceAst: HtmlAst[], implicitTags: string[],
-  implicitAttrs: {[k: string]: string[]}): Message[] {
-    const extractionResult = extractAstMessages(sourceAst, implicitTags, implicitAttrs);
+    sourceAst: hAst.HtmlAst[], interpolationConfig: InterpolationConfig, implicitTags: string[],
+    implicitAttrs: {[k: string]: string[]}): i18nAst.Message[] {
+  const extractionResult = extractAstMessages(sourceAst, implicitTags, implicitAttrs);
 
-    if (extractionResult.errors.length) {
-      return[];
-    }
+  if (extractionResult.errors.length) {
+    return [];
+  }
 
-    const visitor = new _I18nVisitor(new ExpressionParser(new ExpressionLexer()));
+  const visitor =
+      new _I18nVisitor(new ExpressionParser(new ExpressionLexer()), interpolationConfig);
 
-    return extractionResult.messages.map((msg): Message => {
-      return new Message(visitor.convertToI18nAst(msg.nodes), msg.meaning, msg.description);
-    });
+  return extractionResult.messages.map((msg): i18nAst.Message => {
+    return new i18nAst.Message(visitor.convertToI18nAst(msg.nodes), msg.meaning, msg.description);
+  });
 }
 
 class _I18nVisitor implements hAst.HtmlAstVisitor {
   private _isIcu: boolean;
   private _icuDepth: number;
+  private _placeholderRegistry: PlaceholderRegistry;
 
-  constructor(private _expressionParser: ExpressionParser) {}
+  constructor(
+      private _expressionParser: ExpressionParser,
+      private _interpolationConfig: InterpolationConfig) {}
 
-  visitElement(el:hAst.HtmlElementAst, context:any):i18nAst.I18nNode {
+  visitElement(el: hAst.HtmlElementAst, context: any): i18nAst.Node {
     const children = hAst.htmlVisitAll(this, el.children);
     const attrs: {[k: string]: string} = {};
     el.attrs.forEach(attr => {
       // Do not visit the attributes, translatable ones are top-level ASTs
       attrs[attr.name] = attr.value;
     });
-    return new i18nAst.TagPlaceholder(el.name, attrs, children, el.sourceSpan);
+
+    const isVoid: boolean = getHtmlTagDefinition(el.name).isVoid;
+    const startPhName =
+        this._placeholderRegistry.getStartTagPlaceholderName(el.name, attrs, isVoid);
+    const closePhName = isVoid ? '' : this._placeholderRegistry.getCloseTagPlaceholderName(el.name);
+
+    return new i18nAst.TagPlaceholder(
+        el.name, attrs, startPhName, closePhName, children, isVoid, el.sourceSpan);
   }
 
-  visitAttr(attr:hAst.HtmlAttrAst, context:any):i18nAst.I18nNode {
+  visitAttr(attr: hAst.HtmlAttrAst, context: any): i18nAst.Node {
     return this._visitTextWithInterpolation(attr.value, attr.sourceSpan);
   }
 
-  visitText(text:hAst.HtmlTextAst, context:any):i18nAst.I18nNode {
+  visitText(text: hAst.HtmlTextAst, context: any): i18nAst.Node {
     return this._visitTextWithInterpolation(text.value, text.sourceSpan);
   }
 
-  visitComment(comment:hAst.HtmlCommentAst, context:any):i18nAst.I18nNode {
-    return null;
-  }
+  visitComment(comment: hAst.HtmlCommentAst, context: any): i18nAst.Node { return null; }
 
-  visitExpansion(icu:hAst.HtmlExpansionAst, context:any):i18nAst.I18nNode {
+  visitExpansion(icu: hAst.HtmlExpansionAst, context: any): i18nAst.Node {
     this._icuDepth++;
-    const i18nIcuCases: {[k: string]: i18nAst.I18nNode} = {};
+    const i18nIcuCases: {[k: string]: i18nAst.Node} = {};
     const i18nIcu = new i18nAst.Icu(icu.switchValue, icu.type, i18nIcuCases, icu.sourceSpan);
     icu.cases.forEach((caze): void => {
-      i18nIcuCases[caze.value] = new i18nAst.Container(caze.expression.map((hAst) => hAst.visit(this, {})), caze.expSourceSpan);
-     });
+      i18nIcuCases[caze.value] = new i18nAst.Container(
+          caze.expression.map((hAst) => hAst.visit(this, {})), caze.expSourceSpan);
+    });
     this._icuDepth--;
 
     if (this._isIcu || this._icuDepth > 0) {
@@ -79,21 +87,25 @@ class _I18nVisitor implements hAst.HtmlAstVisitor {
     }
 
     // else returns a placeholder
-    return new i18nAst.IcuPlaceholder(i18nIcu, 'icu', icu.sourceSpan);
+    const phName = this._placeholderRegistry.getPlaceholderName('ICU', icu.sourceSpan.toString());
+    return new i18nAst.IcuPlaceholder(i18nIcu, phName, icu.sourceSpan);
   }
 
-  visitExpansionCase(icuCase:hAst.HtmlExpansionCaseAst, context:any):i18nAst.I18nNode {
+  visitExpansionCase(icuCase: hAst.HtmlExpansionCaseAst, context: any): i18nAst.Node {
     throw new Error('Unreachable code');
   }
 
-  public convertToI18nAst(htmlAsts: hAst.HtmlAst[]): i18nAst.I18nNode[] {
+  public convertToI18nAst(htmlAsts: hAst.HtmlAst[]): i18nAst.Node[] {
     this._isIcu = htmlAsts.length == 1 && htmlAsts[0] instanceof hAst.HtmlExpansionAst;
     this._icuDepth = 0;
+    this._placeholderRegistry = new PlaceholderRegistry();
+
     return hAst.htmlVisitAll(this, htmlAsts, {});
   }
 
-  private _visitTextWithInterpolation(text: string, sourceSpan: ParseSourceSpan): i18nAst.I18nNode {
-    const splitInterpolation = this._expressionParser.splitInterpolation(text, sourceSpan.start.toString());
+  private _visitTextWithInterpolation(text: string, sourceSpan: ParseSourceSpan): i18nAst.Node {
+    const splitInterpolation = this._expressionParser.splitInterpolation(
+        text, sourceSpan.start.toString(), this._interpolationConfig);
 
     if (!splitInterpolation) {
       // No expression, return a single text
@@ -101,23 +113,26 @@ class _I18nVisitor implements hAst.HtmlAstVisitor {
     }
 
     // Return a group of text + expressions
-    const nodes: i18nAst.I18nNode[] = [];
+    const nodes: i18nAst.Node[] = [];
     const container = new i18nAst.Container(nodes, sourceSpan);
 
     for (let i = 0; i < splitInterpolation.strings.length - 1; i++) {
       const expression = splitInterpolation.expressions[i];
-      const phName = extractPlaceholderName(expression);
-      nodes.push(
-        new i18nAst.Text(splitInterpolation.strings[i], sourceSpan),
-        new i18nAst.Placeholder(expression, phName, sourceSpan)
-      )
+      const baseName = extractPlaceholderName(expression) || 'INTERPOLATION';
+      const phName = this._placeholderRegistry.getPlaceholderName(baseName, expression);
+
+      if (splitInterpolation.strings[i].length) {
+        nodes.push(new i18nAst.Text(splitInterpolation.strings[i], sourceSpan));
+      }
+
+      nodes.push(new i18nAst.Placeholder(expression, phName, sourceSpan));
     }
 
     // The last index contains no expression
     const lastStringIdx = splitInterpolation.strings.length - 1;
-    nodes.push(new i18nAst.Text(splitInterpolation.strings[lastStringIdx], sourceSpan));
-
+    if (splitInterpolation.strings[lastStringIdx].length) {
+      nodes.push(new i18nAst.Text(splitInterpolation.strings[lastStringIdx], sourceSpan));
+    }
     return container;
   }
 }
-

modules/@angular/compiler/src/i18n/serializers/serializer.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as i18nAst from '../i18n_ast';
+
+export interface Serializer {
+  write(messageMap: {[k: string]: i18nAst.Message}): string;
+
+  load(content: string): {[k: string]: i18nAst.Node[]};
+}

modules/@angular/compiler/src/i18n/serializers/util.ts

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+const TAG_TO_PLACEHOLDER_NAMES: {[k: string]: string} = {
+  'A': 'LINK',
+  'B': 'BOLD_TEXT',
+  'BR': 'LINE_BREAK',
+  'EM': 'EMPHASISED_TEXT',
+  'H1': 'HEADING_LEVEL1',
+  'H2': 'HEADING_LEVEL2',
+  'H3': 'HEADING_LEVEL3',
+  'H4': 'HEADING_LEVEL4',
+  'H5': 'HEADING_LEVEL5',
+  'H6': 'HEADING_LEVEL6',
+  'HR': 'HORIZONTAL_RULE',
+  'I': 'ITALIC_TEXT',
+  'LI': 'LIST_ITEM',
+  'LINK': 'MEDIA_LINK',
+  'OL': 'ORDERED_LIST',
+  'P': 'PARAGRAPH',
+  'Q': 'QUOTATION',
+  'S': 'STRIKETHROUGH_TEXT',
+  'SMALL': 'SMALL_TEXT',
+  'SUB': 'SUBSTRIPT',
+  'SUP': 'SUPERSCRIPT',
+  'TBODY': 'TABLE_BODY',
+  'TD': 'TABLE_CELL',
+  'TFOOT': 'TABLE_FOOTER',
+  'TH': 'TABLE_HEADER_CELL',
+  'THEAD': 'TABLE_HEADER',
+  'TR': 'TABLE_ROW',
+  'TT': 'MONOSPACED_TEXT',
+  'U': 'UNDERLINED_TEXT',
+  'UL': 'UNORDERED_LIST',
+};
+
+/**
+ * Creates unique names for placeholder with different content
+ *
+ * @internal
+ */
+export class PlaceholderRegistry {
+  private _placeHolderNameCounts: {[k: string]: number} = {};
+  private _signatureToName: {[k: string]: string} = {};
+
+  getStartTagPlaceholderName(tag: string, attrs: {[k: string]: string}, isVoid: boolean): string {
+    const signature = this._hashTag(tag, attrs, isVoid);
+    if (this._signatureToName[signature]) {
+      return this._signatureToName[signature];
+    }
+
+    const upperTag = tag.toUpperCase();
+    const baseName = TAG_TO_PLACEHOLDER_NAMES[upperTag] || `TAG_${upperTag}`;
+    const name = this._generateUniqueName(isVoid ? baseName : `START_${baseName}`);
+
+    this._signatureToName[signature] = name;
+
+    return name;
+  }
+
+  getCloseTagPlaceholderName(tag: string): string {
+    const signature = this._hashClosingTag(tag);
+    if (this._signatureToName[signature]) {
+      return this._signatureToName[signature];
+    }
+
+    const upperTag = tag.toUpperCase();
+    const baseName = TAG_TO_PLACEHOLDER_NAMES[upperTag] || `TAG_${upperTag}`;
+    const name = this._generateUniqueName(`CLOSE_${baseName}`);
+
+    this._signatureToName[signature] = name;
+
+    return name;
+  }
+
+  getPlaceholderName(name: string, content: string): string {
+    const upperName = name.toUpperCase();
+    const signature = `PH: ${upperName}=${content}`;
+    if (this._signatureToName[signature]) {
+      return this._signatureToName[signature];
+    }
+
+    const uniqueName = this._generateUniqueName(upperName);
+    this._signatureToName[signature] = uniqueName;
+
+    return uniqueName;
+  }
+
+  private _hashTag(tag: string, attrs: {[k: string]: string}, isVoid: boolean): string {
+    const start = `<${tag.toUpperCase()}`;
+    const strAttrs =
+        Object.getOwnPropertyNames(attrs).sort().map((name) => ` ${name}=${attrs[name]}`).join('');
+    const end = isVoid ? '/>' : `></${tag.toUpperCase()}>`;
+
+    return start + strAttrs + end;
+  }
+
+  private _hashClosingTag(tag: string): string {
+    return this._hashTag(`/${tag.toUpperCase()}`, {}, false);
+  }
+
+  private _generateUniqueName(base: string): string {
+    let name = base;
+    let next = this._placeHolderNameCounts[name];
+
+    if (!next) {
+      next = 1;
+    } else {
+      name += `_${next}`;
+      next++;
+    }
+
+    this._placeHolderNameCounts[base] = next;
+
+    return name;
+  }
+}

modules/@angular/compiler/src/i18n/serializers/xmb.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ListWrapper} from '../../facade/collection';
+import * as i18nAst from '../i18n_ast';
+
+import {Serializer} from './serializer';
+import * as xml from './xml_helper';
+
+const _MESSAGES_TAG = 'messagebundle';
+const _MESSAGE_TAG = 'msg';
+const _PLACEHOLDER_TAG = 'ph';
+const _EXEMPLE_TAG = 'ex';
+
+export class XmbSerializer implements Serializer {
+  // TODO(vicb): DOCTYPE
+  write(messageMap: {[k: string]: i18nAst.Message}): string {
+    const visitor = new _Visitor();
+    const declaration = new xml.Declaration({version: '1.0', encoding: 'UTF-8'});
+    let rootNode = new xml.Tag(_MESSAGES_TAG);
+    rootNode.children.push(new xml.Text('\n'));
+
+    Object.getOwnPropertyNames(messageMap).forEach((id) => {
+      const message = messageMap[id];
+      let attrs: {[k: string]: string} = {id};
+
+      if (message.description) {
+        attrs['desc'] = message.description;
+      }
+
+      if (message.meaning) {
+        attrs['meaning'] = message.meaning;
+      }
+
+      rootNode.children.push(
+          new xml.Text('  '), new xml.Tag(_MESSAGE_TAG, attrs, visitor.serialize(message.nodes)),
+          new xml.Text('\n'));
+    });
+
+    return xml.serialize([
+      declaration,
+      new xml.Text('\n'),
+      rootNode,
+    ]);
+  }
+
+  load(content: string): {[k: string]: i18nAst.Node[]} { throw new Error('Unsupported'); }
+}
+
+class _Visitor implements i18nAst.Visitor {
+  visitText(text: i18nAst.Text, context?: any): xml.Node[] { return [new xml.Text(text.value)]; }
+
+  visitContainer(container: i18nAst.Container, context?: any): xml.Node[] {
+    const nodes: xml.Node[] = [];
+    container.children.forEach((node: i18nAst.Node) => nodes.push(...node.visit(this)));
+    return nodes;
+  }
+
+  visitIcu(icu: i18nAst.Icu, context?: any): xml.Node[] {
+    const nodes = [new xml.Text(`{${icu.expression}, ${icu.type}, `)];
+
+    Object.getOwnPropertyNames(icu.cases).forEach((c: string) => {
+      nodes.push(new xml.Text(`${c} {`), ...icu.cases[c].visit(this), new xml.Text(`}`));
+    });
+
+    nodes.push(new xml.Text(`}`));
+
+    return nodes;
+  }
+
+  visitTagPlaceholder(ph: i18nAst.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]);
+    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]);
+
+    return [startTagPh, ...this.serialize(ph.children), closeTagPh];
+  }
+
+  visitPlaceholder(ph: i18nAst.Placeholder, context?: any): xml.Node[] {
+    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name})];
+  }
+
+  visitIcuPlaceholder(ph: i18nAst.IcuPlaceholder, context?: any): xml.Node[] {
+    return [new xml.Tag(_PLACEHOLDER_TAG, {name: ph.name})];
+  }
+
+  serialize(nodes: i18nAst.Node[]): xml.Node[] {
+    return ListWrapper.flatten(nodes.map(node => node.visit(this)));
+  }
+}

modules/@angular/compiler/src/i18n/serializers/xml_helper.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export interface IVisitor {
+  visitTag(tag: Tag): any;
+  visitText(text: Text): any;
+  visitDeclaration(decl: Declaration): any;
+}
+
+class _Visitor implements IVisitor {
+  visitTag(tag: Tag): string {
+    const strAttrs = this._serializeAttributes(tag.attrs);
+
+    if (tag.children.length == 0) {
+      return `<${tag.name}${strAttrs}/>`;
+    }
+
+    const strChildren = tag.children.map(node => node.visit(this));
+    return `<${tag.name}${strAttrs}>${strChildren.join('')}</${tag.name}>`;
+  }
+
+  visitText(text: Text): string { return text.value; }
+
+  visitDeclaration(decl: Declaration): string {
+    return `<? xml${this._serializeAttributes(decl.attrs)} ?>`;
+  }
+
+  private _serializeAttributes(attrs: {[k: string]: string}) {
+    const strAttrs = Object.getOwnPropertyNames(attrs)
+                         .map((name: string) => `${name}="${attrs[name]}"`)
+                         .join(' ');
+    return strAttrs.length > 0 ? ' ' + strAttrs : '';
+  }
+}
+
+const _visitor = new _Visitor();
+
+export function serialize(nodes: Node[]): string {
+  return nodes.map((node: Node): string => node.visit(_visitor)).join('');
+}
+
+export interface Node { visit(visitor: IVisitor): any; }
+
+export class Declaration implements Node {
+  public attrs: {[k: string]: string} = {};
+
+  constructor(unescapedAttrs: {[k: string]: string}) {
+    Object.getOwnPropertyNames(unescapedAttrs).forEach((k: string) => {
+      this.attrs[k] = _escapeXml(unescapedAttrs[k]);
+    });
+  }
+
+  visit(visitor: IVisitor): any { return visitor.visitDeclaration(this); }
+}
+
+export class Tag implements Node {
+  public attrs: {[k: string]: string} = {};
+
+  constructor(
+      public name: string, unescapedAttrs: {[k: string]: string} = {},
+      public children: Node[] = []) {
+    Object.getOwnPropertyNames(unescapedAttrs).forEach((k: string) => {
+      this.attrs[k] = _escapeXml(unescapedAttrs[k]);
+    });
+  }
+
+  visit(visitor: IVisitor): any { return visitor.visitTag(this); }
+}
+
+export class Text implements Node {
+  value: string;
+  constructor(unescapedValue: string) { this.value = _escapeXml(unescapedValue); };
+
+  visit(visitor: IVisitor): any { return visitor.visitText(this); }
+}
+
+const _ESCAPED_CHARS: [RegExp, string][] = [
+  [/&/g, '&amp;'],
+  [/"/g, '&quot;'],
+  [/'/g, '&apos;'],
+  [/</g, '&lt;'],
+  [/>/g, '&gt;'],
+];
+
+function _escapeXml(text: string): string {
+  return _ESCAPED_CHARS.reduce(
+      (text: string, entry: [RegExp, string]) => text.replace(entry[0], entry[1]), text);
+}

modules/@angular/compiler/src/i18n/shared.ts

@@ -175,8 +175,7 @@ export function extractPhNameFromInterpolation(input: string, index: number): st
 }
 
 export function extractPlaceholderName(input: string): string {
-  const matches = StringWrapper.split(input, _CUSTOM_PH_EXP);
-  return matches[1] || `interpolation`;
+  return StringWrapper.split(input, _CUSTOM_PH_EXP)[1];
 }
 
 
@@ -253,4 +252,4 @@ class _StringifyVisitor implements HtmlAstVisitor {
   private _join(strs: string[], str: string): string {
     return strs.filter(s => s.length > 0).join(str);
   }
-}
+}

modules/@angular/compiler/src/i18n/xmb_serializer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {RegExpWrapper, isBlank, isPresent} from '../facade/lang';
+import {RegExpWrapper, isPresent} from '../facade/lang';
 import {HtmlAst, HtmlElementAst} from '../html_ast';
 import {HtmlParser} from '../html_parser';
 import {ParseError, ParseSourceSpan} from '../parse_util';