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

Andy Hanson · Andy Hanson · commit eea03801e05e · 2016-09-08T07:57:06.000-07:00
diff --git a/src/compiler/transformers/jsx.ts b/src/compiler/transformers/jsx.ts
@@ -210,15 +210,21 @@ 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]);
+            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;
                 }
             });
         }
diff --git a/tests/baselines/reference/tsxReactEmitEntities.js b/tests/baselines/reference/tsxReactEmitEntities.js
@@ -9,8 +9,10 @@ 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>;
 
 
 //// [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}}");
diff --git a/tests/baselines/reference/tsxReactEmitEntities.symbols b/tests/baselines/reference/tsxReactEmitEntities.symbols
@@ -23,3 +23,7 @@ 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))
+
diff --git a/tests/baselines/reference/tsxReactEmitEntities.types b/tests/baselines/reference/tsxReactEmitEntities.types
@@ -25,3 +25,8 @@ 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
+
diff --git a/tests/cases/conformance/jsx/tsxReactEmitEntities.tsx b/tests/cases/conformance/jsx/tsxReactEmitEntities.tsx
@@ -10,3 +10,4 @@ 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>;

Original file line number	Diff line number	Diff line change
`@@ -10,3 +10,4 @@ declare var React: any;`
`10`	`10`
`11`	`11`	`<div>Dot goes here: · &notAnEntity; </div>;`
`12`	`12`	`<div>Be careful of "-ed strings!</div>;`
	`13`	`+<div>{{braces}}</div>;`