Skip to content

Commit 2abb414

Browse files
karaRobert Messerle
kara
authored and
Robert Messerle
committed
feat(i18n): add support for custom placeholder names
Closes angular#7799 Closes angular#8010
1 parent 0e56aaf commit 2abb414

File tree

6 files changed

+133
-16
lines changed

6 files changed

+133
-16
lines changed

‎modules/angular2/src/core/change_detection/parser/parser.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import {
5050
var _implicitReceiver = new ImplicitReceiver();
5151
// TODO(tbosch): Cannot make this const/final right now because of the transpiler...
5252
var INTERPOLATION_REGEXP = /\{\{([\s\S]*?)\}\}/g;
53+
var COMMENT_REGEX = /\/\//g;
5354

5455
class ParseException extends BaseException {
5556
constructor(message: string, input: string, errLocation: string, ctxLocation?: any) {
@@ -73,7 +74,7 @@ export class Parser {
7374

7475
parseAction(input: string, location: any): ASTWithSource {
7576
this._checkNoInterpolation(input, location);
76-
var tokens = this._lexer.tokenize(input);
77+
var tokens = this._lexer.tokenize(this._stripComments(input));
7778
var ast = new _ParseAST(input, location, tokens, this._reflector, true).parseChain();
7879
return new ASTWithSource(ast, input, location);
7980
}
@@ -102,7 +103,7 @@ export class Parser {
102103
}
103104

104105
this._checkNoInterpolation(input, location);
105-
var tokens = this._lexer.tokenize(input);
106+
var tokens = this._lexer.tokenize(this._stripComments(input));
106107
return new _ParseAST(input, location, tokens, this._reflector, false).parseChain();
107108
}
108109

@@ -128,7 +129,7 @@ export class Parser {
128129
let expressions = [];
129130

130131
for (let i = 0; i < split.expressions.length; ++i) {
131-
var tokens = this._lexer.tokenize(split.expressions[i]);
132+
var tokens = this._lexer.tokenize(this._stripComments(split.expressions[i]));
132133
var ast = new _ParseAST(input, location, tokens, this._reflector, false).parseChain();
133134
expressions.push(ast);
134135
}
@@ -164,6 +165,10 @@ export class Parser {
164165
return new ASTWithSource(new LiteralPrimitive(input), input, location);
165166
}
166167

168+
private _stripComments(input: string): string {
169+
return StringWrapper.split(input, COMMENT_REGEX)[0].trim();
170+
}
171+
167172
private _checkNoInterpolation(input: string, location: any): void {
168173
var parts = StringWrapper.split(input, INTERPOLATION_REGEXP);
169174
if (parts.length > 1) {

‎modules/angular2/src/i18n/i18n_html_parser.ts‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,16 @@ import {
2222
partition,
2323
Part,
2424
stringifyNodes,
25-
meaning
25+
meaning,
26+
getPhNameFromBinding,
27+
dedupePhName
2628
} from './shared';
2729

2830
const _I18N_ATTR = "i18n";
2931
const _PLACEHOLDER_ELEMENT = "ph";
3032
const _NAME_ATTR = "name";
3133
const _I18N_ATTR_PREFIX = "i18n-";
32-
let _PLACEHOLDER_EXPANDED_REGEXP = RegExpWrapper.create(`\\<ph(\\s)+name=("(\\d)+")\\>\\<\\/ph\\>`);
34+
let _PLACEHOLDER_EXPANDED_REGEXP = RegExpWrapper.create(`\\<ph(\\s)+name=("(\\w)+")\\>\\<\\/ph\\>`);
3335

3436
/**
3537
* Creates an i18n-ed version of the parsed template.
@@ -313,19 +315,31 @@ export class I18nHtmlParser implements HtmlParser {
313315

314316
private _replacePlaceholdersWithExpressions(message: string, exps: string[],
315317
sourceSpan: ParseSourceSpan): string {
318+
let expMap = this._buildExprMap(exps);
316319
return RegExpWrapper.replaceAll(_PLACEHOLDER_EXPANDED_REGEXP, message, (match) => {
317320
let nameWithQuotes = match[2];
318321
let name = nameWithQuotes.substring(1, nameWithQuotes.length - 1);
319-
let index = NumberWrapper.parseInt(name, 10);
320-
return this._convertIntoExpression(index, exps, sourceSpan);
322+
return this._convertIntoExpression(name, expMap, sourceSpan);
321323
});
322324
}
323325

324-
private _convertIntoExpression(index: number, exps: string[], sourceSpan: ParseSourceSpan) {
325-
if (index >= 0 && index < exps.length) {
326-
return `{{${exps[index]}}}`;
326+
private _buildExprMap(exps: string[]): Map<string, string> {
327+
let expMap = new Map<string, string>();
328+
let usedNames = new Map<string, number>();
329+
330+
for (var i = 0; i < exps.length; i++) {
331+
let phName = getPhNameFromBinding(exps[i], i);
332+
expMap.set(dedupePhName(usedNames, phName), exps[i]);
333+
}
334+
return expMap;
335+
}
336+
337+
private _convertIntoExpression(name: string, expMap: Map<string, string>,
338+
sourceSpan: ParseSourceSpan) {
339+
if (expMap.has(name)) {
340+
return `{{${expMap.get(name)}}}`;
327341
} else {
328-
throw new I18nError(sourceSpan, `Invalid interpolation index '${index}'`);
342+
throw new I18nError(sourceSpan, `Invalid interpolation name '${name}'`);
329343
}
330344
}
331345
}
@@ -347,4 +361,4 @@ class _CreateNodeMapping implements HtmlAstVisitor {
347361
}
348362

349363
visitComment(ast: HtmlCommentAst, context: any): any { return ""; }
350-
}
364+
}

‎modules/angular2/src/i18n/shared.ts‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import {
88
HtmlCommentAst,
99
htmlVisitAll
1010
} from 'angular2/src/compiler/html_ast';
11-
import {isPresent, isBlank} from 'angular2/src/facade/lang';
11+
import {isPresent, isBlank, StringWrapper} from 'angular2/src/facade/lang';
1212
import {Message} from './message';
1313
import {Parser} from 'angular2/src/core/change_detection/parser/parser';
1414

1515
export const I18N_ATTR = "i18n";
1616
export const I18N_ATTR_PREFIX = "i18n-";
17+
var CUSTOM_PH_EXP = /\/\/[\s\S]*i18n[\s\S]*\([\s\S]*ph[\s\S]*=[\s\S]*"([\s\S]*?)"[\s\S]*\)/g;
1718

1819
/**
1920
* An i18n error.
@@ -113,12 +114,15 @@ export function removeInterpolation(value: string, source: ParseSourceSpan,
113114
parser: Parser): string {
114115
try {
115116
let parsed = parser.splitInterpolation(value, source.toString());
117+
let usedNames = new Map<string, number>();
116118
if (isPresent(parsed)) {
117119
let res = "";
118120
for (let i = 0; i < parsed.strings.length; ++i) {
119121
res += parsed.strings[i];
120122
if (i != parsed.strings.length - 1) {
121-
res += `<ph name="${i}"/>`;
123+
let customPhName = getPhNameFromBinding(parsed.expressions[i], i);
124+
customPhName = dedupePhName(usedNames, customPhName);
125+
res += `<ph name="${customPhName}"/>`;
122126
}
123127
}
124128
return res;
@@ -130,6 +134,22 @@ export function removeInterpolation(value: string, source: ParseSourceSpan,
130134
}
131135
}
132136

137+
export function getPhNameFromBinding(input: string, index: number): string {
138+
let customPhMatch = StringWrapper.split(input, CUSTOM_PH_EXP);
139+
return customPhMatch.length > 1 ? customPhMatch[1] : `${index}`;
140+
}
141+
142+
export function dedupePhName(usedNames: Map<string, number>, name: string): string {
143+
let duplicateNameCount = usedNames.get(name);
144+
if (isPresent(duplicateNameCount)) {
145+
usedNames.set(name, duplicateNameCount + 1);
146+
return `${name}_${duplicateNameCount}`;
147+
} else {
148+
usedNames.set(name, 1);
149+
return name;
150+
}
151+
}
152+
133153
export function stringifyNodes(nodes: HtmlAst[], parser: Parser): string {
134154
let visitor = new _StringifyVisitor(parser);
135155
return htmlVisitAll(visitor, nodes).join("");

‎modules/angular2/test/core/change_detection/parser/parser_spec.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,8 @@ export function main() {
104104

105105
it('should parse grouped expressions', () => { checkAction("(1 + 2) * 3", "1 + 2 * 3"); });
106106

107+
it('should ignore comments in expressions', () => { checkAction('a //comment', 'a'); });
108+
107109
it('should parse an empty string', () => { checkAction(''); });
108110

109111
describe("literals", () => {
@@ -270,6 +272,8 @@ export function main() {
270272
});
271273

272274
it('should parse conditional expression', () => { checkBinding('a < b ? a : b'); });
275+
276+
it('should ignore comments in bindings', () => { checkBinding('a //comment', 'a'); });
273277
});
274278

275279
describe('parseTemplateBindings', () => {
@@ -425,6 +429,9 @@ export function main() {
425429
it('should parse expression with newline characters', () => {
426430
checkInterpolation(`{{ 'foo' +\n 'bar' +\r 'baz' }}`, `{{ "foo" + "bar" + "baz" }}`);
427431
});
432+
433+
it('should ignore comments in interpolation expressions',
434+
() => { checkInterpolation('{{a //comment}}', '{{ a }}'); });
428435
});
429436

430437
describe("parseSimpleBinding", () => {

‎modules/angular2/test/i18n/i18n_html_parser_spec.ts‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,36 @@ export function main() {
7676
.toEqual([[HtmlElementAst, 'div', 0], [HtmlAttrAst, 'value', '{{b}} or {{a}}']]);
7777
});
7878

79+
it('should handle interpolation with custom placeholder names', () => {
80+
let translations: {[key: string]: string} = {};
81+
translations[id(new Message('<ph name="FIRST"/> and <ph name="SECOND"/>', null, null))] =
82+
'<ph name="SECOND"/> or <ph name="FIRST"/>';
83+
84+
expect(
85+
humanizeDom(parse(
86+
`<div value='{{a //i18n(ph="FIRST")}} and {{b //i18n(ph="SECOND")}}' i18n-value></div>`,
87+
translations)))
88+
.toEqual([
89+
[HtmlElementAst, 'div', 0],
90+
[HtmlAttrAst, 'value', '{{b //i18n(ph="SECOND")}} or {{a //i18n(ph="FIRST")}}']
91+
]);
92+
});
93+
94+
it('should handle interpolation with duplicate placeholder names', () => {
95+
let translations: {[key: string]: string} = {};
96+
translations[id(new Message('<ph name="FIRST"/> and <ph name="FIRST_1"/>', null, null))] =
97+
'<ph name="FIRST_1"/> or <ph name="FIRST"/>';
98+
99+
expect(
100+
humanizeDom(parse(
101+
`<div value='{{a //i18n(ph="FIRST")}} and {{b //i18n(ph="FIRST")}}' i18n-value></div>`,
102+
translations)))
103+
.toEqual([
104+
[HtmlElementAst, 'div', 0],
105+
[HtmlAttrAst, 'value', '{{b //i18n(ph="FIRST")}} or {{a //i18n(ph="FIRST")}}']
106+
]);
107+
});
108+
79109
it("should handle nested html", () => {
80110
let translations: {[key: string]: string} = {};
81111
translations[id(new Message('<ph name="e0">a</ph><ph name="e2">b</ph>', null, null))] =
@@ -198,7 +228,7 @@ export function main() {
198228

199229
expect(
200230
humanizeErrors(parse("<div value='hi {{a}}' i18n-value></div>", translations).errors))
201-
.toEqual(["Invalid interpolation index '99'"]);
231+
.toEqual(["Invalid interpolation name '99'"]);
202232
});
203233

204234
});
@@ -207,4 +237,4 @@ export function main() {
207237

208238
function humanizeErrors(errors: ParseError[]): string[] {
209239
return errors.map(error => error.msg);
210-
}
240+
}

‎modules/angular2/test/i18n/message_extractor_spec.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,47 @@ export function main() {
9393
.toEqual([new Message('Hi <ph name="0"/> and <ph name="1"/>', null, null)]);
9494
});
9595

96+
it('should replace interpolation with named placeholders if provided (text nodes)', () => {
97+
let res = extractor.extract(`
98+
<div i18n>Hi {{one //i18n(ph="FIRST")}} and {{two //i18n(ph="SECOND")}}</div>`,
99+
'someurl');
100+
expect(res.messages)
101+
.toEqual([
102+
new Message('<ph name="t0">Hi <ph name="FIRST"/> and <ph name="SECOND"/></ph>', null,
103+
null)
104+
]);
105+
});
106+
107+
it('should replace interpolation with named placeholders if provided (attributes)', () => {
108+
let res = extractor.extract(`
109+
<div title='Hi {{one //i18n(ph="FIRST")}} and {{two //i18n(ph="SECOND")}}'
110+
i18n-title></div>`,
111+
'someurl');
112+
expect(res.messages)
113+
.toEqual([new Message('Hi <ph name="FIRST"/> and <ph name="SECOND"/>', null, null)]);
114+
});
115+
116+
it('should match named placeholders with extra spacing', () => {
117+
let res = extractor.extract(`
118+
<div title='Hi {{one // i18n ( ph = "FIRST" )}} and {{two // i18n ( ph = "SECOND" )}}'
119+
i18n-title></div>`,
120+
'someurl');
121+
expect(res.messages)
122+
.toEqual([new Message('Hi <ph name="FIRST"/> and <ph name="SECOND"/>', null, null)]);
123+
});
124+
125+
it('should suffix duplicate placeholder names with numbers', () => {
126+
let res = extractor.extract(`
127+
<div title='Hi {{one //i18n(ph="FIRST")}} and {{two //i18n(ph="FIRST")}} and {{three //i18n(ph="FIRST")}}'
128+
i18n-title></div>`,
129+
'someurl');
130+
expect(res.messages)
131+
.toEqual([
132+
new Message('Hi <ph name="FIRST"/> and <ph name="FIRST_1"/> and <ph name="FIRST_2"/>',
133+
null, null)
134+
]);
135+
});
136+
96137
it("should handle html content", () => {
97138
let res = extractor.extract(
98139
'<div i18n><div attr="value">zero<div>one</div></div><div>two</div></div>', "someurl");

0 commit comments

Comments
 (0)