cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): i18n - ensure that colons in i18n metadata are not rendered (#33820)

Browse Source 
The `:` char is used as a metadata marker in `$localize` messages.
If this char appears in the metadata it must be escaped, as `\:`.
Previously, although the `:` char was being escaped, the TS AST
being generated was not correct and so it was being output double
escaped, which meant that it appeared in the rendered message.

As of TS 3.6.2 the "raw" string can be specified when creating tagged
template AST nodes, so it is possible to correct this.

PR Close #33820
This commit is contained in:
Pete Bacon Darwin
2019-11-15 16:25:32 +00:00
committed by Alex Rickabaugh
parent b7c1a5e45f
commit bc28ca7b0c
7 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
integration/cli-hello-world-ivy-i18n/src/app/app.component.html
View File

@ -1,4 +1,4 @@
<h1 i18n> Hello {{ title }}! </h1>
<h1 i18n="some:description"> Hello {{ title }}! </h1>
<p id="locale">{{ locale }}</p>
<p id="pipe">{{ 1 | percent }} awesome</p>
<p id="date">{{ jan | date : 'LLLL' }}</p>

2
integration/ivy-i18n/src/app/app.component.html
View File

@ -1,6 +1,6 @@
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1 i18n>
<h1 i18n="some:description">
Hello {{ title }}!
</h1>

4
packages/compiler-cli/src/ngtsc/translator/src/translator.ts
View File

@ -549,9 +549,9 @@ function visitLocalizedString(ast: LocalizedString, context: Context, visitor: E
let template: ts.TemplateLiteral;
const metaBlock = serializeI18nHead(ast.metaBlock, ast.messageParts[0]);
if (ast.messageParts.length === 1) {
template = ts.createNoSubstitutionTemplateLiteral(metaBlock);
template = ts.createNoSubstitutionTemplateLiteral(metaBlock.cooked, metaBlock.raw);
} else {
const head = ts.createTemplateHead(metaBlock);
const head = ts.createTemplateHead(metaBlock.cooked, metaBlock.raw);
const spans: ts.TemplateSpan[] = [];
for (let i = 1; i < ast.messageParts.length; i++) {
const resolvedExpression = ast.expressions[i - 1].visitExpression(visitor, context);

2
packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts
View File

@ -264,7 +264,7 @@ describe('i18n support in the template compiler', () => {
$I18N_23$ = $MSG_EXTERNAL_idG$$APP_SPEC_TS_24$;
}
else {
$I18N_23$ = $localize \`:[BACKUP_MESSAGE_ID\\:idH]desc@@idG:Title G\`;
$I18N_23$ = $localize \`:[BACKUP_MESSAGE_ID\:idH]desc@@idG:Title G\`;
}
const $_c25$ = ["title", $I18N_23$];
…

2
packages/compiler/src/output/abstract_emitter.ts
View File

@ -364,7 +364,7 @@ export abstract class AbstractEmitterVisitor implements o.StatementVisitor, o.Ex
visitLocalizedString(ast: o.LocalizedString, ctx: EmitterVisitorContext): any {
const head = serializeI18nHead(ast.metaBlock, ast.messageParts[0]);
ctx.print(ast, '$localize `' + escapeBackticks(head));
ctx.print(ast, '$localize `' + escapeBackticks(head.raw));
for (let i = 1; i < ast.messageParts.length; i++) {
ctx.print(ast, '${');
ast.expressions[i - 1].visitExpression(this, ctx);

15
packages/compiler/src/render3/view/i18n/meta.ts
View File

@ -235,13 +235,15 @@ export function parseI18nMeta(meta?: string): I18nMeta {
}
/**
* Serialize the given `meta` and `messagePart` a string that can be used in a `$localize`
* tagged string. The format of the metadata is the same as that parsed by `parseI18nMeta()`.
* Serialize the given `meta` and `messagePart` "cooked" and "raw" strings that can be used in a
* `$localize` tagged string. The format of the metadata is the same as that parsed by
* `parseI18nMeta()`.
*
* @param meta The metadata to serialize
* @param messagePart The first part of the tagged string
*/
export function serializeI18nHead(meta: I18nMeta, messagePart: string): string {
export function serializeI18nHead(
meta: I18nMeta, messagePart: string): {cooked: string, raw: string} {
let metaBlock = meta.description || '';
if (meta.meaning) {
metaBlock = `${meta.meaning}|${metaBlock}`;
@ -251,9 +253,12 @@ export function serializeI18nHead(meta: I18nMeta, messagePart: string): string {
}
if (metaBlock === '') {
// There is no metaBlock, so we must ensure that any starting colon is escaped.
return escapeStartingColon(messagePart);
return {cooked: messagePart, raw: escapeStartingColon(messagePart)};
} else {
return `:${escapeColons(metaBlock)}:${messagePart}`;
return {
cooked: `:${metaBlock}:${messagePart}`,
raw: `:${escapeColons(metaBlock)}:${messagePart}`
};
}
}

44
packages/compiler/test/render3/view/i18n_spec.ts
View File

@ -210,26 +210,38 @@ describe('Utils', () => {
});
it('serializeI18nHead()', () => {
expect(serializeI18nHead(meta(), '')).toEqual('');
expect(serializeI18nHead(meta('', '', 'desc'), '')).toEqual(':desc:');
expect(serializeI18nHead(meta('id', '', 'desc'), '')).toEqual(':desc@@id:');
expect(serializeI18nHead(meta('', 'meaning', 'desc'), '')).toEqual(':meaning|desc:');
expect(serializeI18nHead(meta('id', 'meaning', 'desc'), '')).toEqual(':meaning|desc@@id:');
expect(serializeI18nHead(meta('id', '', ''), '')).toEqual(':@@id:');
expect(serializeI18nHead(meta(), '')).toEqual({cooked: '', raw: ''});
expect(serializeI18nHead(meta('', '', 'desc'), ''))
.toEqual({cooked: ':desc:', raw: ':desc:'});
expect(serializeI18nHead(meta('id', '', 'desc'), ''))
.toEqual({cooked: ':desc@@id:', raw: ':desc@@id:'});
expect(serializeI18nHead(meta('', 'meaning', 'desc'), ''))
.toEqual({cooked: ':meaning|desc:', raw: ':meaning|desc:'});
expect(serializeI18nHead(meta('id', 'meaning', 'desc'), ''))
.toEqual({cooked: ':meaning|desc@@id:', raw: ':meaning|desc@@id:'});
expect(serializeI18nHead(meta('id', '', ''), '')).toEqual({cooked: ':@@id:', raw: ':@@id:'});
// Escaping colons (block markers)
expect(serializeI18nHead(meta('id:sub_id', 'meaning', 'desc'), ''))
.toEqual(':meaning|desc@@id\\:sub_id:');
expect(serializeI18nHead(meta('id', 'meaning:sub_meaning', 'desc'), ''))
.toEqual(':meaning\\:sub_meaning|desc@@id:');
.toEqual({cooked: ':meaning|desc@@id:sub_id:', raw: ':meaning|desc@@id\\:sub_id:'});
expect(serializeI18nHead(meta('id', 'meaning:sub_meaning', 'desc'), '')).toEqual({
cooked: ':meaning:sub_meaning|desc@@id:',
raw: ':meaning\\:sub_meaning|desc@@id:'
});
expect(serializeI18nHead(meta('id', 'meaning', 'desc:sub_desc'), ''))
.toEqual(':meaning|desc\\:sub_desc@@id:');
expect(serializeI18nHead(meta('id', 'meaning', 'desc'), 'message source'))
.toEqual(':meaning|desc@@id:message source');
expect(serializeI18nHead(meta('id', 'meaning', 'desc'), ':message source'))
.toEqual(':meaning|desc@@id::message source');
expect(serializeI18nHead(meta('', '', ''), 'message source')).toEqual('message source');
expect(serializeI18nHead(meta('', '', ''), ':message source')).toEqual('\\:message source');
.toEqual({cooked: ':meaning|desc:sub_desc@@id:', raw: ':meaning|desc\\:sub_desc@@id:'});
expect(serializeI18nHead(meta('id', 'meaning', 'desc'), 'message source')).toEqual({
cooked: ':meaning|desc@@id:message source',
raw: ':meaning|desc@@id:message source'
});
expect(serializeI18nHead(meta('id', 'meaning', 'desc'), ':message source')).toEqual({
cooked: ':meaning|desc@@id::message source',
raw: ':meaning|desc@@id::message source'
});
expect(serializeI18nHead(meta('', '', ''), 'message source'))
.toEqual({cooked: 'message source', raw: 'message source'});
expect(serializeI18nHead(meta('', '', ''), ':message source'))
.toEqual({cooked: ':message source', raw: '\\:message source'});
});
it('serializeI18nPlaceholderBlock()', () => {