Merge pull request #7842 from Microsoft/transforms-fixJsx2

Additional fixes for JSX transforms
2026-02-16 05:58:32 -06:00 · 2016-04-06 11:59:32 -07:00 · 2016-04-06 11:59:32 -07:00 · 35a4c42a92
commit 35a4c42a92
parent 71bd7e7f9d 0b2264cc54
21 changed files with 171 additions and 128 deletions
--- a/src/compiler/factory.ts
+++ b/src/compiler/factory.ts
@ -66,7 +66,7 @@ namespace ts {
        // We don't use "clone" from core.ts here, as we need to preserve the prototype chain of
        // the original node. We also need to exclude specific properties and only include own-
        // properties (to skip members already defined on the shared prototype).
-        const clone = <T>createSynthesizedNode(node.kind);
+        const clone = <T>createNode(node.kind, /*location*/ undefined);
        clone.flags = node.flags;
        clone.original = node;

@ -784,17 +784,25 @@ namespace ts {
        );
    }

-    export function createJsxSpread(reactNamespace: string, segments: Expression[]) {
+    function createReactNamespace(reactNamespace: string, parent: JsxOpeningLikeElement) {
+        // Create an identifier and give it a parent. This allows us to resolve the react
+        // namespace during emit.
+        const react = createIdentifier(reactNamespace || "React");
+        react.parent = parent;
+        return react;
+    }
+
+    export function createReactSpread(reactNamespace: string, segments: Expression[], parentElement: JsxOpeningLikeElement) {
        return createCall(
            createPropertyAccess(
-                createIdentifier(reactNamespace || "React"),
+                createReactNamespace(reactNamespace, parentElement),
                "__spread"
            ),
            segments
        );
    }

-    export function createJsxCreateElement(reactNamespace: string, tagName: Expression, props: Expression, children: Expression[]): LeftHandSideExpression {
+    export function createReactCreateElement(reactNamespace: string, tagName: Expression, props: Expression, children: Expression[], parentElement: JsxOpeningLikeElement, location: TextRange): LeftHandSideExpression {
        const argumentsList = [tagName];
        if (props) {
            argumentsList.push(props);
@ -805,15 +813,16 @@ namespace ts {
                argumentsList.push(createNull());
            }

-            addRange(argumentsList, children);
+            addNodes(argumentsList, children, /*startOnNewLine*/ children.length > 1);
        }

        return createCall(
            createPropertyAccess(
-                createIdentifier(reactNamespace || "React"),
+                createReactNamespace(reactNamespace, parentElement),
                "createElement"
            ),
-            argumentsList
+            argumentsList,
+            location
        );
    }

--- a/src/compiler/printer.ts
+++ b/src/compiler/printer.ts
@ -1017,9 +1017,7 @@ const _super = (function (geti, seti) {
            function emitNewExpression(node: NewExpression) {
                write("new ");
                emitExpression(node.expression);
-                if (node.arguments) {
-                    emitExpressionList(node, node.arguments, ListFormat.NewExpressionArguments);
-                }
+                emitExpressionList(node, node.arguments, ListFormat.NewExpressionArguments);
            }

            function emitTaggedTemplateExpression(node: TaggedTemplateExpression) {
@ -1536,7 +1534,7 @@ const _super = (function (geti, seti) {
                write("interface ");
                emit(node.name);
                emitTypeParameters(node, node.typeParameters);
-                emitList(node, node.heritageClauses, ListFormat.SingleLine);
+                emitList(node, node.heritageClauses, ListFormat.HeritageClauses);
                write(" {");
                emitList(node, node.members, ListFormat.InterfaceMembers);
                write("}");
@ -1722,7 +1720,7 @@ const _super = (function (geti, seti) {

            function emitJsxSelfClosingElement(node: JsxSelfClosingElement) {
                write("<");
-                emit(node.tagName);
+                emitJsxTagName(node.tagName);
                write(" ");
                emitList(node, node.attributes, ListFormat.JsxElementAttributes);
                write("/>");
@ -1730,7 +1728,7 @@ const _super = (function (geti, seti) {

            function emitJsxOpeningElement(node: JsxOpeningElement) {
                write("<");
-                emit(node.tagName);
+                emitJsxTagName(node.tagName);
                writeIfAny(node.attributes, " ");
                emitList(node, node.attributes, ListFormat.JsxElementAttributes);
                write(">");
@ -1742,7 +1740,7 @@ const _super = (function (geti, seti) {

            function emitJsxClosingElement(node: JsxClosingElement) {
                write("</");
-                emit(node.tagName);
+                emitJsxTagName(node.tagName);
                write(">");
            }

@ -1758,9 +1756,20 @@ const _super = (function (geti, seti) {
            }

            function emitJsxExpression(node: JsxExpression) {
-                write("{");
-                emitExpression(node.expression);
-                write("}");
+                if (node.expression) {
+                    write("{");
+                    emitExpression(node.expression);
+                    write("}");
+                }
+            }
+
+            function emitJsxTagName(node: EntityName) {
+                if (node.kind === SyntaxKind.Identifier) {
+                    emitExpression(<Identifier>node);
+                }
+                else {
+                    emit(node);
+                }
            }

            //
@ -2168,6 +2177,7 @@ const _super = (function (geti, seti) {

                    // Emit each child.
                    let previousSibling: Node;
+                    let shouldDecreaseIndentAfterEmit: boolean;
                    const delimiter = getDelimiter(format);
                    for (let i = 0; i < count; i++) {
                        const child = children[start + i];
@ -2178,6 +2188,13 @@ const _super = (function (geti, seti) {

                            // Write either a line terminator or whitespace to separate the elements.
                            if (shouldWriteSeparatingLineTerminator(previousSibling, child, format)) {
+                                // If a synthesized node in a single-line list starts on a new
+                                // line, we should increase the indent.
+                                if ((format & (ListFormat.LinesMask | ListFormat.Indented)) === ListFormat.SingleLine) {
+                                    increaseIndent();
+                                    shouldDecreaseIndentAfterEmit = true;
+                                }
+
                                writeLine();
                                shouldEmitInterveningComments = false;
                            }
@ -2196,6 +2213,11 @@ const _super = (function (geti, seti) {
                        // Emit this child.
                        emit(child);

+                        if (shouldDecreaseIndentAfterEmit) {
+                            decreaseIndent();
+                            shouldDecreaseIndentAfterEmit = false;
+                        }
+
                        previousSibling = child;
                    }

@ -2322,7 +2344,7 @@ const _super = (function (geti, seti) {
                    }
                }
                else {
-                    return false;
+                    return nextNode.startsOnNewLine;
                }
            }

@ -2619,40 +2641,43 @@ const _super = (function (geti, seti) {
        None = 0,

        // Line separators
-        SingleLine = 1 << 0,            // Prints the list on a single line (default).
-        MultiLine = 1 << 1,             // Prints the list on multiple lines.
-        PreserveLines = 1 << 2,         // Prints the list using line preservation if possible.
+        SingleLine = 0,                 // Prints the list on a single line (default).
+        MultiLine = 1 << 0,             // Prints the list on multiple lines.
+        PreserveLines = 1 << 1,         // Prints the list using line preservation if possible.
        LinesMask = SingleLine | MultiLine | PreserveLines,

        // Delimiters
        NotDelimited = 0,               // There is no delimiter between list items (default).
-        BarDelimited = 1 << 3,          // Each list item is space-and-bar (" |") delimited.
-        AmpersandDelimited = 1 << 4,    // Each list item is space-and-ampersand (" &") delimited.
-        CommaDelimited = 1 << 5,        // Each list item is comma (",") delimited.
-        AllowTrailingComma = 1 << 6,    // Write a trailing comma (",") if present.
+        BarDelimited = 1 << 2,          // Each list item is space-and-bar (" |") delimited.
+        AmpersandDelimited = 1 << 3,    // Each list item is space-and-ampersand (" &") delimited.
+        CommaDelimited = 1 << 4,        // Each list item is comma (",") delimited.
        DelimitersMask = BarDelimited | AmpersandDelimited | CommaDelimited,

+        AllowTrailingComma = 1 << 5,    // Write a trailing comma (",") if present.
+
        // Whitespace
-        Indented = 1 << 7,              // The list should be indented.
-        SpaceBetweenBraces = 1 << 8,    // Inserts a space after the opening brace and before the closing brace.
-        SpaceBetweenSiblings = 1 << 9,  // Inserts a space between each sibling node.
+        Indented = 1 << 6,              // The list should be indented.
+        SpaceBetweenBraces = 1 << 7,    // Inserts a space after the opening brace and before the closing brace.
+        SpaceBetweenSiblings = 1 << 8,  // Inserts a space between each sibling node.

        // Brackets/Braces
-        Braces = 1 << 10,                // The list is surrounded by "{" and "}".
-        Parenthesis = 1 << 11,          // The list is surrounded by "(" and ")".
-        AngleBrackets = 1 << 12,        // The list is surrounded by "<" and ">".
-        SquareBrackets = 1 << 13,       // The list is surrounded by "[" and "]".
-        OptionalIfUndefined = 1 << 14,  // Do not emit brackets if the list is undefined.
-        OptionalIfEmpty = 1 << 15,      // Do not emit brackets if the list is empty.
-        Optional = OptionalIfUndefined | OptionalIfEmpty,
+        Braces = 1 << 9,                 // The list is surrounded by "{" and "}".
+        Parenthesis = 1 << 10,          // The list is surrounded by "(" and ")".
+        AngleBrackets = 1 << 11,        // The list is surrounded by "<" and ">".
+        SquareBrackets = 1 << 12,       // The list is surrounded by "[" and "]".
        BracketsMask = Braces | Parenthesis | AngleBrackets | SquareBrackets,

+        OptionalIfUndefined = 1 << 13,  // Do not emit brackets if the list is undefined.
+        OptionalIfEmpty = 1 << 14,      // Do not emit brackets if the list is empty.
+        Optional = OptionalIfUndefined | OptionalIfEmpty,
+
        // Other
-        PreferNewLine = 1 << 16,        // Prefer adding a LineTerminator between synthesized nodes.
-        NoTrailingNewLine = 1 << 17,    // Do not emit a trailing NewLine for a MultiLine list.
+        PreferNewLine = 1 << 15,        // Prefer adding a LineTerminator between synthesized nodes.
+        NoTrailingNewLine = 1 << 16,    // Do not emit a trailing NewLine for a MultiLine list.

        // Precomputed Formats
        Modifiers = SingleLine | SpaceBetweenSiblings,
+        HeritageClauses = SingleLine | SpaceBetweenSiblings,
        TypeLiteralMembers = MultiLine | Indented,
        TupleTypeElements = CommaDelimited | SpaceBetweenSiblings | SingleLine | Indented,
        UnionTypeConstituents = BarDelimited | SpaceBetweenSiblings | SingleLine,
--- a/src/compiler/transformers/jsx.ts
+++ b/src/compiler/transformers/jsx.ts
@ -33,10 +33,10 @@ namespace ts {
        function visitorWorker(node: Node): VisitResult<Node> {
            switch (node.kind) {
                case SyntaxKind.JsxElement:
-                    return visitJsxElement(<JsxElement>node);
+                    return visitJsxElement(<JsxElement>node, /*isChild*/ false);

                case SyntaxKind.JsxSelfClosingElement:
-                    return visitJsxSelfClosingElement(<JsxSelfClosingElement>node);
+                    return visitJsxSelfClosingElement(<JsxSelfClosingElement>node, /*isChild*/ false);

                case SyntaxKind.JsxExpression:
                    return visitJsxExpression(<JsxExpression>node);
@ -56,10 +56,10 @@ namespace ts {
                    return visitJsxExpression(<JsxExpression>node);

                case SyntaxKind.JsxElement:
-                    return visitJsxElement(<JsxElement>node);
+                    return visitJsxElement(<JsxElement>node, /*isChild*/ true);

                case SyntaxKind.JsxSelfClosingElement:
-                    return visitJsxSelfClosingElement(<JsxSelfClosingElement>node);
+                    return visitJsxSelfClosingElement(<JsxSelfClosingElement>node, /*isChild*/ true);

                default:
                    Debug.failBadSyntaxKind(node);
@ -67,15 +67,15 @@ namespace ts {
            }
        }

-        function visitJsxElement(node: JsxElement) {
-            return visitJsxOpeningLikeElement(node.openingElement, node.children);
+        function visitJsxElement(node: JsxElement, isChild: boolean) {
+            return visitJsxOpeningLikeElement(node.openingElement, node.children, isChild, /*location*/ node);
        }

-        function visitJsxSelfClosingElement(node: JsxSelfClosingElement) {
-            return visitJsxOpeningLikeElement(node, /*children*/ undefined);
+        function visitJsxSelfClosingElement(node: JsxSelfClosingElement, isChild: boolean) {
+            return visitJsxOpeningLikeElement(node, /*children*/ undefined, isChild, /*location*/ node);
        }

-        function visitJsxOpeningLikeElement(node: JsxOpeningLikeElement, children: JsxChild[]) {
+        function visitJsxOpeningLikeElement(node: JsxOpeningLikeElement, children: JsxChild[], isChild: boolean, location: TextRange) {
            const tagName = getTagName(node);
            let objectProperties: Expression;
            const attrs = node.attributes;
@ -102,15 +102,23 @@ namespace ts {
                // Either emit one big object literal (no spread attribs), or
                // a call to React.__spread
                objectProperties = singleOrUndefined(segments)
-                    || createJsxSpread(compilerOptions.reactNamespace, segments);
+                    || createReactSpread(compilerOptions.reactNamespace, segments, node);
            }

-            return createJsxCreateElement(
+            const element = createReactCreateElement(
                compilerOptions.reactNamespace,
                tagName,
                objectProperties,
-                filter(map(children, transformJsxChildToExpression), isDefined)
+                filter(map(children, transformJsxChildToExpression), isDefined),
+                node,
+                location
            );
+
+            if (isChild) {
+                startOnNewLine(element);
+            }
+
+            return element;
        }

        function transformJsxSpreadAttributeToExpression(node: JsxSpreadAttribute) {
--- a/tests/baselines/reference/jsxReactTestSuite.js
+++ b/tests/baselines/reference/jsxReactTestSuite.js
@ -148,7 +148,10 @@ var x = <div attr1={"foo" + "bar"} attr2={"foo" + "bar" +
    
    
  </div>);
-(<div attr1="foo">
+(<div 
+/* a multi-line
+   comment */
+attr1="foo">
    <span // a double-slash comment
 attr2="bar"/>
  </div>);
--- a/tests/baselines/reference/keywordInJsxIdentifier.js
+++ b/tests/baselines/reference/keywordInJsxIdentifier.js
@ -8,7 +8,7 @@ declare var React: any;


 //// [keywordInJsxIdentifier.js]
-React.createElement("foo", {"class-id": true});
-React.createElement("foo", {class: true});
-React.createElement("foo", {"class-id": "1"});
-React.createElement("foo", {class: "1"});
+React.createElement("foo", { "class-id": true });
+React.createElement("foo", { class: true });
+React.createElement("foo", { "class-id": "1" });
+React.createElement("foo", { class: "1" });
--- a/tests/baselines/reference/reactNamespaceInvalidInput.js
+++ b/tests/baselines/reference/reactNamespaceInvalidInput.js
@ -4,4 +4,4 @@


 //// [reactNamespaceInvalidInput.js]
-my-React-Lib.createElement("foo", {data: true});
+my-React-Lib.createElement("foo", { data: true });
--- a/tests/baselines/reference/reactNamespaceJSXEmit.js
+++ b/tests/baselines/reference/reactNamespaceJSXEmit.js
@ -13,8 +13,8 @@ declare var x: any;


 //// [reactNamespaceJSXEmit.js]
-myReactLib.createElement("foo", {data: true});
-myReactLib.createElement(Bar, {x: x});
+myReactLib.createElement("foo", { data: true });
+myReactLib.createElement(Bar, { x: x });
 myReactLib.createElement("x-component", null);
 myReactLib.createElement(Bar, myReactLib.__spread({}, x));
-myReactLib.createElement(Bar, myReactLib.__spread({}, x, {y: 2}));
+myReactLib.createElement(Bar, myReactLib.__spread({}, x, { y: 2 }));
--- a/tests/baselines/reference/reactNamespaceMissingDeclaration.js
+++ b/tests/baselines/reference/reactNamespaceMissingDeclaration.js
@ -5,4 +5,4 @@

 //// [reactNamespaceMissingDeclaration.js]
 // Error myReactLib not declared
-myReactLib.createElement("foo", {data: true});
+myReactLib.createElement("foo", { data: true });
--- a/tests/baselines/reference/tsxErrorRecovery3.js
+++ b/tests/baselines/reference/tsxErrorRecovery3.js
@ -16,4 +16,4 @@ React.createElement("div", null)
    ,
        React.createElement("div", null);
 //// [file2.js]
-var x = React.createElement("div", null), React.createElement("div", null);
+var x = (React.createElement("div", null), React.createElement("div", null));
--- a/tests/baselines/reference/tsxExternalModuleEmit2.js
+++ b/tests/baselines/reference/tsxExternalModuleEmit2.js
@ -21,6 +21,6 @@ declare var Foo, React;
 "use strict";
 var mod_1 = require('mod');
 // Should see mod_1['default'] in emit here
-React.createElement(Foo, {handler: mod_1["default"]});
+React.createElement(Foo, { handler: mod_1["default"] });
 // Should see mod_1['default'] in emit here
 React.createElement(Foo, React.__spread({}, mod_1["default"]));
--- a/tests/baselines/reference/tsxReactEmit1.js
+++ b/tests/baselines/reference/tsxReactEmit1.js
@ -44,17 +44,17 @@ var whitespace3 = <div>
 //// [file.js]
 var p;
 var selfClosed1 = React.createElement("div", null);
-var selfClosed2 = React.createElement("div", {x: "1"});
-var selfClosed3 = React.createElement("div", {x: '1'});
-var selfClosed4 = React.createElement("div", {x: "1", y: '0'});
-var selfClosed5 = React.createElement("div", {x: 0, y: '0'});
-var selfClosed6 = React.createElement("div", {x: "1", y: '0'});
-var selfClosed7 = React.createElement("div", {x: p, y: 'p', b: true});
+var selfClosed2 = React.createElement("div", { x: "1" });
+var selfClosed3 = React.createElement("div", { x: '1' });
+var selfClosed4 = React.createElement("div", { x: "1", y: '0' });
+var selfClosed5 = React.createElement("div", { x: 0, y: '0' });
+var selfClosed6 = React.createElement("div", { x: "1", y: '0' });
+var selfClosed7 = React.createElement("div", { x: p, y: 'p', b: true });
 var openClosed1 = React.createElement("div", null);
-var openClosed2 = React.createElement("div", {n: 'm'}, "foo");
-var openClosed3 = React.createElement("div", {n: 'm'}, p);
-var openClosed4 = React.createElement("div", {n: 'm'}, p < p);
-var openClosed5 = React.createElement("div", {n: 'm', b: true}, p > p);
+var openClosed2 = React.createElement("div", { n: 'm' }, "foo");
+var openClosed3 = React.createElement("div", { n: 'm' }, p);
+var openClosed4 = React.createElement("div", { n: 'm' }, p < p);
+var openClosed5 = React.createElement("div", { n: 'm', b: true }, p > p);
 var SomeClass = (function () {
    function SomeClass() {
    }
@ -63,15 +63,15 @@ var SomeClass = (function () {
        var rewrites1 = React.createElement("div", null, function () { return _this; });
        var rewrites2 = React.createElement("div", null, [p].concat(p, [p]));
        var rewrites3 = React.createElement("div", null, { p: p });
-        var rewrites4 = React.createElement("div", {a: function () { return _this; }});
-        var rewrites5 = React.createElement("div", {a: [p].concat(p, [p])});
-        var rewrites6 = React.createElement("div", {a: { p: p }});
+        var rewrites4 = React.createElement("div", { a: function () { return _this; } });
+        var rewrites5 = React.createElement("div", { a: [p].concat(p, [p]) });
+        var rewrites6 = React.createElement("div", { a: { p: p } });
    };
    return SomeClass;
 }());
 var whitespace1 = React.createElement("div", null, "      ");
-var whitespace2 = React.createElement("div", null, 
-    "  ", 
-    p, 
+var whitespace2 = React.createElement("div", null,
+    "  ",
+    p,
    "    ");
 var whitespace3 = React.createElement("div", null, p);
--- a/tests/baselines/reference/tsxReactEmit2.js
+++ b/tests/baselines/reference/tsxReactEmit2.js
@ -19,6 +19,6 @@ var spreads5 = <div x={p2} {...p1} y={p3}>{p2}</div>;
 var p1, p2, p3;
 var spreads1 = React.createElement("div", React.__spread({}, p1), p2);
 var spreads2 = React.createElement("div", React.__spread({}, p1), p2);
-var spreads3 = React.createElement("div", React.__spread({x: p3}, p1), p2);
-var spreads4 = React.createElement("div", React.__spread({}, p1, {x: p3}), p2);
-var spreads5 = React.createElement("div", React.__spread({x: p2}, p1, {y: p3}), p2);
+var spreads3 = React.createElement("div", React.__spread({ x: p3 }, p1), p2);
+var spreads4 = React.createElement("div", React.__spread({}, p1, { x: p3 }), p2);
+var spreads5 = React.createElement("div", React.__spread({ x: p2 }, p1, { y: p3 }), p2);
--- a/tests/baselines/reference/tsxReactEmit3.js
+++ b/tests/baselines/reference/tsxReactEmit3.js
@ -8,11 +8,11 @@ declare var Foo, Bar, baz;
 <Foo> <Bar> q </Bar> <Bar/>   s <Bar/><Bar/></Foo>;

 //// [test.js]
-React.createElement(Foo, null, 
-    " ", 
-    React.createElement(Bar, null, " q "), 
-    " ", 
-    React.createElement(Bar, null), 
-    "   s ", 
-    React.createElement(Bar, null), 
+React.createElement(Foo, null,
+    " ",
+    React.createElement(Bar, null, " q "),
+    " ",
+    React.createElement(Bar, null),
+    "   s ",
+    React.createElement(Bar, null),
    React.createElement(Bar, null));
--- a/tests/baselines/reference/tsxReactEmit4.js
+++ b/tests/baselines/reference/tsxReactEmit4.js
@ -21,4 +21,4 @@ var spread1 = <div {...p} x={0} />;
 var p;
 var openClosed1 = React.createElement("div", null, blah);
 // Should emit React.__spread({}, p, {x: 0})
-var spread1 = React.createElement("div", React.__spread({}, p, {x: 0}));
+var spread1 = React.createElement("div", React.__spread({}, p, { x: 0 }));
--- a/tests/baselines/reference/tsxReactEmit5.js
+++ b/tests/baselines/reference/tsxReactEmit5.js
@ -27,4 +27,4 @@ var test_1 = require("./test");
 // Should emit test_1.React.createElement
 //  and React.__spread
 var foo;
-var spread1 = test_1.React.createElement("div", test_1.React.__spread({x: ''}, foo, {y: ''}));
+var spread1 = test_1.React.createElement("div", test_1.React.__spread({ x: '' }, foo, { y: '' }));
--- a/tests/baselines/reference/tsxReactEmit6.js
+++ b/tests/baselines/reference/tsxReactEmit6.js
@ -36,7 +36,7 @@ var M;
    // Should emit M.React.createElement
    //  and M.React.__spread
    var foo;
-    var spread1 = M.React.createElement("div", M.React.__spread({x: ''}, foo, {y: ''}));
+    var spread1 = M.React.createElement("div", M.React.__spread({ x: '' }, foo, { y: '' }));
    // Quotes
    var x = M.React.createElement("div", null, "This \"quote\" thing");
 })(M || (M = {}));
--- a/tests/baselines/reference/tsxReactEmit7.js
+++ b/tests/baselines/reference/tsxReactEmit7.js
@ -21,13 +21,13 @@ var e = <div xxxxx="val"></div>;


 //// [file.js]
-var m = React.createElement("div", {"x-y": "val"});
-var n = React.createElement("div", {"xx-y": "val"});
-var o = React.createElement("div", {"x-yy": "val"});
-var p = React.createElement("div", {"xx-yy": "val"});
+var m = React.createElement("div", { "x-y": "val" });
+var n = React.createElement("div", { "xx-y": "val" });
+var o = React.createElement("div", { "x-yy": "val" });
+var p = React.createElement("div", { "xx-yy": "val" });
 // Investigation
-var a = React.createElement("div", {x: "val"});
-var b = React.createElement("div", {xx: "val"});
-var c = React.createElement("div", {xxx: "val"});
-var d = React.createElement("div", {xxxx: "val"});
-var e = React.createElement("div", {xxxxx: "val"});
+var a = React.createElement("div", { x: "val" });
+var b = React.createElement("div", { xx: "val" });
+var c = React.createElement("div", { xxx: "val" });
+var d = React.createElement("div", { xxxx: "val" });
+var e = React.createElement("div", { xxxxx: "val" });
--- a/tests/baselines/reference/tsxReactEmitEntities.js
+++ b/tests/baselines/reference/tsxReactEmitEntities.js
@ -12,5 +12,5 @@ declare var React: any;


 //// [file.js]
-React.createElement("div", null, "Dot goes here: · &notAnEntity; ");
+React.createElement("div", null, "Dot goes here: \u00B7 &notAnEntity; ");
 React.createElement("div", null, "Be careful of \"-ed strings!");
--- a/tests/baselines/reference/tsxReactEmitNesting.js
+++ b/tests/baselines/reference/tsxReactEmitNesting.js
@ -38,23 +38,21 @@ let render = (ctrl, model) =>
 //// [file.js]
 // A simple render function with nesting and control statements
 var render = function (ctrl, model) {
-    return vdom.createElement("section", {class: "todoapp"}, 
-        vdom.createElement("header", {class: "header"}, 
-            vdom.createElement("h1", null, "todos <x>"), 
-            vdom.createElement("input", {class: "new-todo", autofocus: true, autocomplete: "off", placeholder: "What needs to be done?", value: model.newTodo, onKeyup: ctrl.addTodo.bind(ctrl, model)})), 
-        vdom.createElement("section", {class: "main", style: { display: (model.todos && model.todos.length) ? "block" : "none" }}, 
-            vdom.createElement("input", {class: "toggle-all", type: "checkbox", onChange: ctrl.toggleAll.bind(ctrl)}), 
-            vdom.createElement("ul", {class: "todo-list"}, model.filteredTodos.map(function (todo) {
-                return vdom.createElement("li", {class: { todo: true, completed: todo.completed, editing: todo == model.editedTodo }}, 
-                    vdom.createElement("div", {class: "view"}, 
+    return vdom.createElement("section", { class: "todoapp" },
+        vdom.createElement("header", { class: "header" },
+            vdom.createElement("h1", null, "todos <x>"),
+            vdom.createElement("input", { class: "new-todo", autofocus: true, autocomplete: "off", placeholder: "What needs to be done?", value: model.newTodo, onKeyup: ctrl.addTodo.bind(ctrl, model) })),
+        vdom.createElement("section", { class: "main", style: { display: (model.todos && model.todos.length) ? "block" : "none" } },
+            vdom.createElement("input", { class: "toggle-all", type: "checkbox", onChange: ctrl.toggleAll.bind(ctrl) }),
+            vdom.createElement("ul", { class: "todo-list" }, model.filteredTodos.map(function (todo) {
+                return vdom.createElement("li", { class: { todo: true, completed: todo.completed, editing: todo == model.editedTodo } },
+                    vdom.createElement("div", { class: "view" },
                        (!todo.editable) ?
-                            vdom.createElement("input", {class: "toggle", type: "checkbox"})
-                            : null, 
-                        vdom.createElement("label", {onDoubleClick: function () { ctrl.editTodo(todo); }}, todo.title), 
-                        vdom.createElement("button", {class: "destroy", onClick: ctrl.removeTodo.bind(ctrl, todo)}), 
-                        vdom.createElement("div", {class: "iconBorder"}, 
-                            vdom.createElement("div", {class: "icon"})
-                        ))
-                );
+                            vdom.createElement("input", { class: "toggle", type: "checkbox" })
+                            : null,
+                        vdom.createElement("label", { onDoubleClick: function () { ctrl.editTodo(todo); } }, todo.title),
+                        vdom.createElement("button", { class: "destroy", onClick: ctrl.removeTodo.bind(ctrl, todo) }),
+                        vdom.createElement("div", { class: "iconBorder" },
+                            vdom.createElement("div", { class: "icon" }))));
            }))));
 };
--- a/tests/baselines/reference/tsxReactEmitWhitespace.js
+++ b/tests/baselines/reference/tsxReactEmitWhitespace.js
@ -59,9 +59,9 @@ var p = 0;
 // Emit "   "
 React.createElement("div", null, "   ");
 // Emit "  ", p, "   "
-React.createElement("div", null, 
-    "  ", 
-    p, 
+React.createElement("div", null,
+    "  ",
+    p,
    "    ");
 // Emit only p
 React.createElement("div", null, p);
@ -76,4 +76,4 @@ React.createElement("div", null, "3");
 // Emit no args
 React.createElement("div", null);
 // Emit "foo" + ' ' + "bar"
-React.createElement("div", null, "foo" + ' ' + "bar");
+React.createElement("div", null, "foo" + " " + "bar");
--- a/tests/baselines/reference/tsxReactEmitWhitespace2.js
+++ b/tests/baselines/reference/tsxReactEmitWhitespace2.js
@ -18,15 +18,15 @@ declare var React: any;

 //// [file.js]
 // Emit ' word' in the last string
-React.createElement("div", null, 
-    "word ", 
-    React.createElement("code", null, "code"), 
+React.createElement("div", null,
+    "word ",
+    React.createElement("code", null, "code"),
    " word");
 // Same here
-React.createElement("div", null, 
-    React.createElement("code", null, "code"), 
+React.createElement("div", null,
+    React.createElement("code", null, "code"),
    " word");
 // And here
-React.createElement("div", null, 
-    React.createElement("code", null), 
+React.createElement("div", null,
+    React.createElement("code", null),
    " word");