Skip to content

When emitting react code, replace HTML numeric entities with their encoded characters #10747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
2 commits merged into from
Sep 8, 2016
Merged

When emitting react code, replace HTML numeric entities with their encoded characters #10747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eea0380
When emitting react code, replace HTML numeric entities with their en…
Sep 7, 2016
a8eb4a2
Also decode entities when emitting attributes. Also, lexer should not…
Sep 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/compiler/emitter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2030,7 +2030,7 @@ const _super = (function (geti, seti) {
emitTrailingCommentsOfPosition(commentRange.pos);
}

emitExpression(node.initializer);
emitExpression(initializer);
}

function emitShorthandPropertyAssignment(node: ShorthandPropertyAssignment) {
Expand Down
8 changes: 6 additions & 2 deletions src/compiler/parser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -905,6 +905,10 @@ namespace ts {
return currentToken = scanner.scanJsxToken();
}

function scanJsxAttributeValue(): SyntaxKind {
return currentToken = scanner.scanJsxAttributeValue();
}

function speculationHelper<T>(callback: () => T, isLookAhead: boolean): T {
// Keep track of the state we'll need to rollback to if lookahead fails (or if the
// caller asked us to always reset our state).
Expand Down Expand Up @@ -3831,8 +3835,8 @@ namespace ts {
scanJsxIdentifier();
const node = <JsxAttribute>createNode(SyntaxKind.JsxAttribute);
node.name = parseIdentifierName();
if (parseOptional(SyntaxKind.EqualsToken)) {
switch (token()) {
if (token() === SyntaxKind.EqualsToken) {
switch (scanJsxAttributeValue()) {
case SyntaxKind.StringLiteral:
node.initializer = parseLiteralNode();
break;
Expand Down
20 changes: 18 additions & 2 deletions src/compiler/scanner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ namespace ts {
reScanSlashToken(): SyntaxKind;
reScanTemplateToken(): SyntaxKind;
scanJsxIdentifier(): SyntaxKind;
scanJsxAttributeValue(): SyntaxKind;
reScanJsxToken(): SyntaxKind;
scanJsxToken(): SyntaxKind;
scanJSDocToken(): SyntaxKind;
Expand Down Expand Up @@ -817,6 +818,7 @@ namespace ts {
reScanSlashToken,
reScanTemplateToken,
scanJsxIdentifier,
scanJsxAttributeValue,
reScanJsxToken,
scanJsxToken,
scanJSDocToken,
Expand Down Expand Up @@ -911,7 +913,7 @@ namespace ts {
return value;
}

function scanString(): string {
function scanString(allowEscapes = true): string {
const quote = text.charCodeAt(pos);
pos++;
let result = "";
Expand All @@ -929,7 +931,7 @@ namespace ts {
pos++;
break;
}
if (ch === CharacterCodes.backslash) {
if (ch === CharacterCodes.backslash && allowEscapes) {
result += text.substring(start, pos);
result += scanEscapeSequence();
start = pos;
Expand Down Expand Up @@ -1737,6 +1739,20 @@ namespace ts {
return token;
}

function scanJsxAttributeValue(): SyntaxKind {
startPos = pos;

switch (text.charCodeAt(pos)) {
case CharacterCodes.doubleQuote:
case CharacterCodes.singleQuote:
tokenValue = scanString(/*allowEscapes*/ false);
return token = SyntaxKind.StringLiteral;
default:
// If this scans anything other than `{`, it's a parse error.
return scan();
}
}

function scanJSDocToken(): SyntaxKind {
if (pos >= end) {
return token = SyntaxKind.EndOfFileToken;
Expand Down
27 changes: 20 additions & 7 deletions src/compiler/transformers/jsx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,8 @@ namespace ts {
return createLiteral(true);
}
else if (node.kind === SyntaxKind.StringLiteral) {
return node;
const decoded = tryDecodeEntities((<StringLiteral>node).text);
return decoded ? createLiteral(decoded, /*location*/ node) : node;
}
else if (node.kind === SyntaxKind.JsxExpression) {
return visitJsxExpression(<JsxExpression>node);
Expand Down Expand Up @@ -210,19 +211,31 @@ namespace ts {
}

/**
* Decodes JSX entities.
* Replace entities like "&nbsp;", "&#123;", and "&#xDEADBEEF;" with the characters they encode.
* See https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
*/
function decodeEntities(text: string) {
return text.replace(/&(\w+);/g, function(s: any, m: string) {
if (entities[m] !== undefined) {
return String.fromCharCode(entities[m]);
function decodeEntities(text: string): string {
return text.replace(/&((#((\d+)|x([\da-fA-F]+)))|(\w+));/g, (match, _all, _number, _digits, decimal, hex, word) => {
if (decimal) {
return String.fromCharCode(parseInt(decimal, 10));
}
else if (hex) {
return String.fromCharCode(parseInt(hex, 16));
}
else {
return s;
const ch = entities[word];
// If this is not a valid entity, then just use `match` (replace it with itself, i.e. don't replace)
return ch ? String.fromCharCode(ch) : match;
}
});
}

/** Like `decodeEntities` but returns `undefined` if there were no entities to decode. */
function tryDecodeEntities(text: string): string | undefined {
const decoded = decodeEntities(text);
return decoded === text ? undefined : decoded;
}

function getTagName(node: JsxElement | JsxOpeningLikeElement): Expression {
if (node.kind === SyntaxKind.JsxElement) {
return getTagName((<JsxElement>node).openingElement);
Expand Down
19 changes: 19 additions & 0 deletions tests/baselines/reference/tsxReactEmitEntities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,27 @@ declare var React: any;

<div>Dot goes here: &middot; &notAnEntity; </div>;
<div>Be careful of &quot;-ed strings!</div>;
<div>&#0123;&#123;braces&#x7d;&#x7D;</div>;
// Escapes do nothing
<div>\n</div>;

// Also works in string literal attributes
<div attr="&#0123;&hellip;&#x7D;\"></div>;
// Does not happen for a string literal that happens to be inside an attribute (and escapes then work)
<div attr={"&#0123;&hellip;&#x7D;\""}></div>;
// Preserves single quotes
<div attr='"'></div>


//// [file.js]
React.createElement("div", null, "Dot goes here: \u00B7 &notAnEntity; ");
React.createElement("div", null, "Be careful of \"-ed strings!");
React.createElement("div", null, "{{braces}}");
// Escapes do nothing
React.createElement("div", null, "\\n");
// Also works in string literal attributes
React.createElement("div", { attr: "{\u2026}\\" });
// Does not happen for a string literal that happens to be inside an attribute (and escapes then work)
React.createElement("div", { attr: "&#0123;&hellip;&#x7D;\"" });
// Preserves single quotes
React.createElement("div", { attr: '"' });
27 changes: 27 additions & 0 deletions tests/baselines/reference/tsxReactEmitEntities.symbols
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,30 @@ declare var React: any;
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))

<div>&#0123;&#123;braces&#x7d;&#x7D;</div>;
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))

// Escapes do nothing
<div>\n</div>;
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))

// Also works in string literal attributes
<div attr="&#0123;&hellip;&#x7D;\"></div>;
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))
>attr : Symbol(unknown)
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))

// Does not happen for a string literal that happens to be inside an attribute (and escapes then work)
<div attr={"&#0123;&hellip;&#x7D;\""}></div>;
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))
>attr : Symbol(unknown)
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))

// Preserves single quotes
<div attr='"'></div>
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))
>attr : Symbol(unknown)
>div : Symbol(JSX.IntrinsicElements, Decl(file.tsx, 1, 22))

33 changes: 33 additions & 0 deletions tests/baselines/reference/tsxReactEmitEntities.types
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,36 @@ declare var React: any;
>div : any
>div : any

<div>&#0123;&#123;braces&#x7d;&#x7D;</div>;
><div>&#0123;&#123;braces&#x7d;&#x7D;</div> : JSX.Element
>div : any
>div : any

// Escapes do nothing
<div>\n</div>;
><div>\n</div> : JSX.Element
>div : any
>div : any

// Also works in string literal attributes
<div attr="&#0123;&hellip;&#x7D;\"></div>;
><div attr="&#0123;&hellip;&#x7D;\"></div> : JSX.Element
>div : any
>attr : any
>div : any

// Does not happen for a string literal that happens to be inside an attribute (and escapes then work)
<div attr={"&#0123;&hellip;&#x7D;\""}></div>;
><div attr={"&#0123;&hellip;&#x7D;\""}></div> : JSX.Element
>div : any
>attr : any
>"&#0123;&hellip;&#x7D;\"" : string
>div : any

// Preserves single quotes
<div attr='"'></div>
><div attr='"'></div> : JSX.Element
>div : any
>attr : any
>div : any

10 changes: 10 additions & 0 deletions tests/cases/conformance/jsx/tsxReactEmitEntities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,13 @@ declare var React: any;

<div>Dot goes here: &middot; &notAnEntity; </div>;
<div>Be careful of &quot;-ed strings!</div>;
<div>&#0123;&#123;braces&#x7d;&#x7D;</div>;
// Escapes do nothing
<div>\n</div>;

// Also works in string literal attributes
<div attr="&#0123;&hellip;&#x7D;\"></div>;
// Does not happen for a string literal that happens to be inside an attribute (and escapes then work)
<div attr={"&#0123;&hellip;&#x7D;\""}></div>;
// Preserves single quotes
<div attr='"'></div>