From b3846bfe65ed6ee16fb9cd118c1630d0d701d907 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Fri, 7 Apr 2017 16:41:29 -0700
Subject: [PATCH 01/22] Wip - type checking JSX children

---
 src/compiler/checker.ts              | 61 +++++++++++++++++-----------
 src/compiler/diagnosticMessages.json |  4 ++
 src/compiler/types.ts                |  6 ++-
 3 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index d7acedd663d94..ff10bea4f973a 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -1,4 +1,4 @@
-/// <reference path="moduleNameResolver.ts"/>
+/// <reference path="moduleNameResolver.ts"/>
 /// <reference path="binder.ts"/>
 
 /* @internal */
@@ -424,6 +424,8 @@ namespace ts {
             IntrinsicClassAttributes: "IntrinsicClassAttributes"
         };
 
+        const jsxChildrenPropertyName = "children";
+
         const subtypeRelation = createMap<RelationComparisonResult>();
         const assignableRelation = createMap<RelationComparisonResult>();
         const comparableRelation = createMap<RelationComparisonResult>();
@@ -8648,7 +8650,7 @@ namespace ts {
             // is considered known if the object type is empty and the check is for assignability, if the object type has
             // index signatures, or if the property is actually declared in the object type. In a union or intersection
             // type, a property is considered known if it is known in any constituent type.
-            function isKnownProperty(type: Type, name: string, isComparingJsxAttributes: boolean): boolean {
+            function isKnownProperty(type: Type, name: string, isComparingJsxAttributes: boolean, containsSynthesizedJsxChildren: boolean): boolean {
                 if (type.flags & TypeFlags.Object) {
                     const resolved = resolveStructuredTypeMembers(<ObjectType>type);
                     if ((relation === assignableRelation || relation === comparableRelation) &&
@@ -8658,14 +8660,16 @@ namespace ts {
                     else if (resolved.stringIndexInfo || (resolved.numberIndexInfo && isNumericLiteralName(name))) {
                         return true;
                     }
-                    else if (getPropertyOfType(type, name) || (isComparingJsxAttributes && !isUnhyphenatedJsxName(name))) {
-                        // For JSXAttributes, if the attribute has a hyphenated name, consider that the attribute to be known.
+                    else if (getPropertyOfType(type, name) || containsSynthesizedJsxChildren || (isComparingJsxAttributes && !isUnhyphenatedJsxName(name))) {
+                        // For JSXAttributes, consider that the attribute to be known if
+                        //      1. the attribute has a hyphenated name
+                        //      2. "children" attribute that is synthesized from children property of Jsx element
                         return true;
                     }
                 }
                 else if (type.flags & TypeFlags.UnionOrIntersection) {
                     for (const t of (<UnionOrIntersectionType>type).types) {
-                        if (isKnownProperty(t, name, isComparingJsxAttributes)) {
+                        if (isKnownProperty(t, name, isComparingJsxAttributes, containsSynthesizedJsxChildren)) {
                             return true;
                         }
                     }
@@ -8676,8 +8680,9 @@ namespace ts {
             function hasExcessProperties(source: FreshObjectLiteralType, target: Type, reportErrors: boolean): boolean {
                 if (maybeTypeOfKind(target, TypeFlags.Object) && !(getObjectFlags(target) & ObjectFlags.ObjectLiteralPatternWithComputedProperties)) {
                     const isComparingJsxAttributes = !!(source.flags & TypeFlags.JsxAttributes);
+                    const containsSynthesizedJsxChildren = !!(source.flags & TypeFlags.ContainsSynthesizedJsxChildren);
                     for (const prop of getPropertiesOfObjectType(source)) {
-                        if (!isKnownProperty(target, prop.name, isComparingJsxAttributes)) {
+                        if (!isKnownProperty(target, prop.name, isComparingJsxAttributes, containsSynthesizedJsxChildren)) {
                             if (reportErrors) {
                                 // We know *exactly* where things went wrong when comparing the types.
                                 // Use this property as the error node as this will be more helpful in
@@ -13173,21 +13178,6 @@ namespace ts {
                 checkExpression(node.closingElement.tagName);
             }
 
-            // Check children
-            for (const child of node.children) {
-                switch (child.kind) {
-                    case SyntaxKind.JsxExpression:
-                        checkJsxExpression(<JsxExpression>child);
-                        break;
-                    case SyntaxKind.JsxElement:
-                        checkJsxElement(<JsxElement>child);
-                        break;
-                    case SyntaxKind.JsxSelfClosingElement:
-                        checkJsxSelfClosingElement(<JsxSelfClosingElement>child);
-                        break;
-                }
-            }
-
             return getJsxGlobalElementType() || anyType;
         }
 
@@ -13280,6 +13270,30 @@ namespace ts {
                     }
                 });
             }
+
+            // Handle children attribute
+            const parent = openingLikeElement.parent.kind === SyntaxKind.JsxElement ?
+                openingLikeElement.parent as JsxElement : undefined;
+            let containsSynthesizedJsxChildren = false;
+            // Comment
+            if (parent && parent.openingElement === openingLikeElement && parent.children.length > 0) {
+                // Error if there is a attribute named "children" and children element.
+                // This is because children element will overwrite the value from attributes
+                if (attributesTable.has(jsxChildrenPropertyName)) {
+                    error(attributes, Diagnostics.props_children_are_specified_twice_The_attribute_named_children_will_be_overwritten);
+                }
+
+                // If there are children in the body of JSX element, create dummy attribute "children" with anyType so that it will pass the attribute checking process
+                const childrenPropSymbol = createSymbol(SymbolFlags.Property | SymbolFlags.Transient, jsxChildrenPropertyName);
+                const childrenTypes: Type[] = [];
+                for (const child of (parent as JsxElement).children) {
+                    childrenTypes.push(child.kind === SyntaxKind.JsxText ? stringType : checkExpression(child));
+                }
+                childrenPropSymbol.type = getUnionType(childrenTypes,  /*subtypeReduction*/ false);
+                attributesTable.set(jsxChildrenPropertyName, childrenPropSymbol);
+                containsSynthesizedJsxChildren = true;
+            }
+
             return createJsxAttributesType(attributes.symbol, attributesTable);
 
             /**
@@ -13290,7 +13304,8 @@ namespace ts {
             function createJsxAttributesType(symbol: Symbol, attributesTable: Map<Symbol>) {
                 const result = createAnonymousType(symbol, attributesTable, emptyArray, emptyArray, /*stringIndexInfo*/ undefined, /*numberIndexInfo*/ undefined);
                 const freshObjectLiteralFlag = compilerOptions.suppressExcessPropertyErrors ? 0 : TypeFlags.FreshLiteral;
-                result.flags |= TypeFlags.JsxAttributes | TypeFlags.ContainsObjectLiteral | freshObjectLiteralFlag;
+                const containsSynthesizedJsxChildrenFlag = containsSynthesizedJsxChildren ? TypeFlags.ContainsSynthesizedJsxChildren : 0;
+                result.flags |= TypeFlags.JsxAttributes | TypeFlags.ContainsObjectLiteral | freshObjectLiteralFlag | containsSynthesizedJsxChildrenFlag;
                 result.objectFlags |= ObjectFlags.ObjectLiteral;
                 return result;
             }
@@ -14533,7 +14548,7 @@ namespace ts {
             //         We can figure that out by resolving attributes property and check number of properties in the resolved type
             // If the call has correct arity, we will then check if the argument type and parameter type is assignable
 
-            const callIsIncomplete = node.attributes.end === node.end;  // If we are missing the close "/>", the call is incomplete
+            const callIsIncomplete = node.attributes.end === node.end;  // If we are missing the close "/>", the call is incoplete
             if (callIsIncomplete) {
                 return true;
             }
diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json
index 075d4247460e9..72554a9f0bacf 100644
--- a/src/compiler/diagnosticMessages.json
+++ b/src/compiler/diagnosticMessages.json
@@ -2099,6 +2099,10 @@
         "category": "Error",
         "code": 2707
     },
+    "props.children are specified twice. The attribute named 'children' will be overwritten.": {
+        "category": "Error",
+        "code": 2708
+    },
 
     "Import declaration '{0}' is using private name '{1}'.": {
         "category": "Error",
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index 354ef9d8b1043..fd246fed82102 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -1,4 +1,4 @@
-namespace ts {
+namespace ts {
     /**
      * Type of objects whose values are all of the same type.
      * The `in` and `for-in` operators can *not* be safely used,
@@ -10,7 +10,7 @@ namespace ts {
 
     /** ES6 Map interface. */
     export interface Map<T> {
-        get(key: string): T;
+        get(key: string): T | undefined;
         has(key: string): boolean;
         set(key: string, value: T): this;
         delete(key: string): boolean;
@@ -2975,6 +2975,8 @@ namespace ts {
         NonPrimitive            = 1 << 24,  // intrinsic object type
         /* @internal */
         JsxAttributes           = 1 << 25,  // Jsx attributes type
+        /* @internal */
+        ContainsSynthesizedJsxChildren = 1 << 26,  // Jsx attributes type contains synthesized children property from Jsx element's children
 
         /* @internal */
         Nullable = Undefined | Null,

From f86a730371c506d5ca9864b8d3a4b1835e1d4d47 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Tue, 11 Apr 2017 10:52:18 -0700
Subject: [PATCH 02/22] Consider whitespace that won't be emitted to be
 different kind so that we won't include in typ-checking

---
 src/compiler/checker.ts | 15 ++++++---------
 src/compiler/parser.ts  |  8 ++++++--
 src/compiler/scanner.ts | 21 ++++++++++++++++++++-
 src/compiler/types.ts   |  1 +
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index ff10bea4f973a..2c9d4f95d5f88 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13275,7 +13275,7 @@ namespace ts {
             const parent = openingLikeElement.parent.kind === SyntaxKind.JsxElement ?
                 openingLikeElement.parent as JsxElement : undefined;
             let containsSynthesizedJsxChildren = false;
-            // Comment
+            // We have to check that openingElement of the parent is the one we are visiting as this may not be true for selfClosingElement
             if (parent && parent.openingElement === openingLikeElement && parent.children.length > 0) {
                 // Error if there is a attribute named "children" and children element.
                 // This is because children element will overwrite the value from attributes
@@ -13287,7 +13287,11 @@ namespace ts {
                 const childrenPropSymbol = createSymbol(SymbolFlags.Property | SymbolFlags.Transient, jsxChildrenPropertyName);
                 const childrenTypes: Type[] = [];
                 for (const child of (parent as JsxElement).children) {
-                    childrenTypes.push(child.kind === SyntaxKind.JsxText ? stringType : checkExpression(child));
+                    // In React, JSX text that contains only whitespaces will be ignored so we don't want to type-check that
+                    // because then type of children property will have constituent of string type.
+                    if (child.kind !== SyntaxKind.JsxTextAllWhiteSpaces) {
+                        childrenTypes.push(child.kind === SyntaxKind.JsxText ? stringType : checkExpression(child as Expression, checkMode));
+                    }
                 }
                 childrenPropSymbol.type = getUnionType(childrenTypes,  /*subtypeReduction*/ false);
                 attributesTable.set(jsxChildrenPropertyName, childrenPropSymbol);
@@ -17099,13 +17103,6 @@ namespace ts {
             return cache ? checkExpressionCached(node) : checkExpression(node);
         }
 
-        // Checks an expression and returns its type. The contextualMapper parameter serves two purposes: When
-        // contextualMapper is not undefined and not equal to the identityMapper function object it indicates that the
-        // expression is being inferentially typed (section 4.15.2 in spec) and provides the type mapper to use in
-        // conjunction with the generic contextual type. When contextualMapper is equal to the identityMapper function
-        // object, it serves as an indicator that all contained function and arrow expressions should be considered to
-        // have the wildcard function type; this form of type check is used during overload resolution to exclude
-        // contextually typed function and arrow expressions in the initial phase.
         function checkExpression(node: Expression | QualifiedName, checkMode?: CheckMode): Type {
             let type: Type;
             if (node.kind === SyntaxKind.QualifiedName) {
diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts
index a82d5b02b4402..770601bd56cd8 100644
--- a/src/compiler/parser.ts
+++ b/src/compiler/parser.ts
@@ -3825,7 +3825,7 @@ namespace ts {
         }
 
         function parseJsxText(): JsxText {
-            const node = <JsxText>createNode(SyntaxKind.JsxText, scanner.getStartPos());
+            const node = <JsxText>createNode(currentToken, scanner.getStartPos());
             currentToken = scanner.scanJsxToken();
             return finishNode(node);
         }
@@ -3833,6 +3833,7 @@ namespace ts {
         function parseJsxChild(): JsxChild {
             switch (token()) {
                 case SyntaxKind.JsxText:
+                case SyntaxKind.JsxTextAllWhiteSpaces:
                     return parseJsxText();
                 case SyntaxKind.OpenBraceToken:
                     return parseJsxExpression(/*inExpressionContext*/ false);
@@ -3862,7 +3863,10 @@ namespace ts {
                 else if (token() === SyntaxKind.ConflictMarkerTrivia) {
                     break;
                 }
-                result.push(parseJsxChild());
+                const child = parseJsxChild();
+                if (child) {
+                    result.push(child);
+                }
             }
 
             result.end = scanner.getTokenPos();
diff --git a/src/compiler/scanner.ts b/src/compiler/scanner.ts
index 7b6e0c09db48b..59453f4fa4b28 100644
--- a/src/compiler/scanner.ts
+++ b/src/compiler/scanner.ts
@@ -1723,6 +1723,11 @@ namespace ts {
                 return token = SyntaxKind.OpenBraceToken;
             }
 
+            // First non-whitespace character on this line.
+            let firstNonWhitespace = 0;
+            // These initial values are special because the first line is:
+            // firstNonWhitespace = 0 to indicate that we want leading whitspace,
+
             while (pos < end) {
                 pos++;
                 char = text.charCodeAt(pos);
@@ -1736,8 +1741,22 @@ namespace ts {
                     }
                     break;
                 }
+
+                // FirstNonWhitespace is 0, then we only see whitespaces so far. If we see a linebreak, we want to ignore that whitespaces.
+                // i.e (- : whitespace)
+                //      <div>----
+                //      </div> becomes <div></div>
+                //
+                //      <div>----</div> becomes <div>----</div>
+                if (isLineBreak(char) && firstNonWhitespace === 0) {
+                    firstNonWhitespace = -1;
+                }
+                else if (!isWhiteSpaceSingleLine(char)) {
+                    firstNonWhitespace = pos;
+                }
             }
-            return token = SyntaxKind.JsxText;
+
+            return firstNonWhitespace === -1 ? SyntaxKind.JsxTextAllWhiteSpaces : SyntaxKind.JsxText;
         }
 
         // Scans a JSX identifier; these differ from normal identifiers in that
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index fd246fed82102..0e0deeedfaa3b 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -65,6 +65,7 @@
         NumericLiteral,
         StringLiteral,
         JsxText,
+        JsxTextAllWhiteSpaces,
         RegularExpressionLiteral,
         NoSubstitutionTemplateLiteral,
         // Pseudo-literals

From 8e2dd382679be99b680b14df9c34334675844d83 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Tue, 11 Apr 2017 10:52:50 -0700
Subject: [PATCH 03/22] Use JSX Attributes to contextually type children
 property

---
 src/compiler/checker.ts | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 2c9d4f95d5f88..62fabf8b85a75 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -12635,6 +12635,35 @@ namespace ts {
             return node === conditional.whenTrue || node === conditional.whenFalse ? getContextualType(conditional) : undefined;
         }
 
+        function getContextualTypeForJsxExpression(node: JsxExpression): Type {
+            // JSX expression can appear in two position : JSX Element's children or JSX attribute
+            const jsxAttributes = isJsxAttributeLike(node.parent) ?
+                node.parent.parent :
+                node.parent.openingElement.attributes; // node.parent is JsxElement
+
+            // When we trying to resolve JsxOpeningLikeElement as a stateless function element, we will already give its attributes a contextual type
+            // which is a type of the parameter of the signature we are trying out.
+            // If there is no contextual type (e.g. we are trying to resolve stateful component), get attributes type from resolving element's tagName
+            const attributesType = getContextualType(jsxAttributes);
+
+            if (!attributesType || isTypeAny(attributesType)) {
+                return undefined;
+            }
+
+            if (isJsxAttribute(node.parent)) {
+                // JSX expression is in JSX attribute
+                return getTypeOfPropertyOfType(attributesType, (node.parent as JsxAttribute).name.text);
+            }
+            else if (node.parent.kind === SyntaxKind.JsxElement) {
+                // JSX expression is in children of JSX Element, we will look for an atttribute named "chidlren"
+                return getTypeOfPropertyOfType(attributesType, jsxChildrenPropertyName);
+            }
+            else {
+                // JSX expression is in JSX spread attribute
+                return attributesType;
+            }
+        }
+
         function getContextualTypeForJsxAttribute(attribute: JsxAttribute | JsxSpreadAttribute) {
             // When we trying to resolve JsxOpeningLikeElement as a stateless function element, we will already give its attributes a contextual type
             // which is a type of the parameter of the signature we are trying out.
@@ -12718,7 +12747,7 @@ namespace ts {
                 case SyntaxKind.ParenthesizedExpression:
                     return getContextualType(<ParenthesizedExpression>parent);
                 case SyntaxKind.JsxExpression:
-                    return getContextualType(<JsxExpression>parent);
+                    return getContextualTypeForJsxExpression(<JsxExpression>parent);
                 case SyntaxKind.JsxAttribute:
                 case SyntaxKind.JsxSpreadAttribute:
                     return getContextualTypeForJsxAttribute(<JsxAttribute | JsxSpreadAttribute>parent);

From 17417e9a88f2fdb738d7a72f8a012ca43657d03c Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Tue, 11 Apr 2017 10:53:14 -0700
Subject: [PATCH 04/22] Format checker

---
 src/compiler/checker.ts | 68 ++++++++++++++++++++---------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 62fabf8b85a75..7bbab7005fd13 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -349,7 +349,7 @@ namespace ts {
             // The presence of a particular fact means that the given test is true for some (and possibly all) values
             // of that kind of type.
             BaseStringStrictFacts = TypeofEQString | TypeofNENumber | TypeofNEBoolean | TypeofNESymbol | TypeofNEObject | TypeofNEFunction | TypeofNEHostObject | NEUndefined | NENull | NEUndefinedOrNull,
-            BaseStringFacts = BaseStringStrictFacts  | EQUndefined | EQNull | EQUndefinedOrNull | Falsy,
+            BaseStringFacts = BaseStringStrictFacts | EQUndefined | EQNull | EQUndefinedOrNull | Falsy,
             StringStrictFacts = BaseStringStrictFacts | Truthy | Falsy,
             StringFacts = BaseStringFacts | Truthy,
             EmptyStringStrictFacts = BaseStringStrictFacts | Falsy,
@@ -1618,7 +1618,7 @@ namespace ts {
                 }
             }
 
-             // May be an untyped module. If so, ignore resolutionDiagnostic.
+            // May be an untyped module. If so, ignore resolutionDiagnostic.
             if (!isRelative && resolvedModule && !extensionIsTypeScript(resolvedModule.extension)) {
                 if (isForAugmentation) {
                     const diag = Diagnostics.Invalid_module_name_in_augmentation_Module_0_resolves_to_an_untyped_module_at_1_which_cannot_be_augmented;
@@ -3973,7 +3973,7 @@ namespace ts {
                 type;
         }
 
-        function getTypeForDeclarationFromJSDocComment(declaration: Node ) {
+        function getTypeForDeclarationFromJSDocComment(declaration: Node) {
             const jsdocType = getJSDocType(declaration);
             if (jsdocType) {
                 return getTypeFromTypeNode(jsdocType);
@@ -5640,7 +5640,7 @@ namespace ts {
         function getConstraintOfType(type: TypeVariable | UnionOrIntersectionType): Type {
             return type.flags & TypeFlags.TypeParameter ? getConstraintOfTypeParameter(<TypeParameter>type) :
                 type.flags & TypeFlags.IndexedAccess ? getConstraintOfIndexedAccess(<IndexedAccessType>type) :
-                getBaseConstraintOfType(type);
+                    getBaseConstraintOfType(type);
         }
 
         function getConstraintOfTypeParameter(typeParameter: TypeParameter): Type {
@@ -5713,7 +5713,7 @@ namespace ts {
                     }
                     return t.flags & TypeFlags.Union && baseTypes.length === types.length ? getUnionType(baseTypes) :
                         t.flags & TypeFlags.Intersection && baseTypes.length ? getIntersectionType(baseTypes) :
-                        undefined;
+                            undefined;
                 }
                 if (t.flags & TypeFlags.Index) {
                     return stringType;
@@ -5764,11 +5764,11 @@ namespace ts {
             const t = type.flags & TypeFlags.TypeVariable ? getBaseConstraintOfType(type) || emptyObjectType : type;
             return t.flags & TypeFlags.Intersection ? getApparentTypeOfIntersectionType(<IntersectionType>t) :
                 t.flags & TypeFlags.StringLike ? globalStringType :
-                t.flags & TypeFlags.NumberLike ? globalNumberType :
-                t.flags & TypeFlags.BooleanLike ? globalBooleanType :
-                t.flags & TypeFlags.ESSymbol ? getGlobalESSymbolType(/*reportErrors*/ languageVersion >= ScriptTarget.ES2015) :
-                t.flags & TypeFlags.NonPrimitive ? emptyObjectType :
-                t;
+                    t.flags & TypeFlags.NumberLike ? globalNumberType :
+                        t.flags & TypeFlags.BooleanLike ? globalBooleanType :
+                            t.flags & TypeFlags.ESSymbol ? getGlobalESSymbolType(/*reportErrors*/ languageVersion >= ScriptTarget.ES2015) :
+                                t.flags & TypeFlags.NonPrimitive ? emptyObjectType :
+                                    t;
         }
 
         function createUnionOrIntersectionProperty(containingType: UnionOrIntersectionType, name: string): Symbol {
@@ -7212,8 +7212,8 @@ namespace ts {
         function getIndexType(type: Type): Type {
             return maybeTypeOfKind(type, TypeFlags.TypeVariable) ? getIndexTypeForGenericType(<TypeVariable | UnionOrIntersectionType>type) :
                 getObjectFlags(type) & ObjectFlags.Mapped ? getConstraintTypeFromMappedType(<MappedType>type) :
-                type.flags & TypeFlags.Any || getIndexInfoOfType(type, IndexKind.String) ? stringType :
-                getLiteralTypeFromPropertyNames(type);
+                    type.flags & TypeFlags.Any || getIndexInfoOfType(type, IndexKind.String) ? stringType :
+                        getLiteralTypeFromPropertyNames(type);
         }
 
         function getIndexTypeOrString(type: Type): Type {
@@ -7409,7 +7409,7 @@ namespace ts {
          * this function should be called in a left folding style, with left = previous result of getSpreadType
          * and right = the new element to be spread.
          */
-        function getSpreadType(left: Type, right: Type): Type  {
+        function getSpreadType(left: Type, right: Type): Type {
             if (left.flags & TypeFlags.Any || right.flags & TypeFlags.Any) {
                 return anyType;
             }
@@ -7698,7 +7698,7 @@ namespace ts {
         function createTypeMapper(sources: Type[], targets: Type[]): TypeMapper {
             const mapper: TypeMapper = sources.length === 1 ? makeUnaryTypeMapper(sources[0], targets ? targets[0] : anyType) :
                 sources.length === 2 ? makeBinaryTypeMapper(sources[0], targets ? targets[0] : anyType, sources[1], targets ? targets[1] : anyType) :
-                makeArrayTypeMapper(sources, targets);
+                    makeArrayTypeMapper(sources, targets);
             mapper.mappedTypes = sources;
             return mapper;
         }
@@ -8502,7 +8502,7 @@ namespace ts {
                     (globalNumberType === source && numberType === target) ||
                     (globalBooleanType === source && booleanType === target) ||
                     (getGlobalESSymbolType(/*reportErrors*/ false) === source && esSymbolType === target)) {
-                        reportError(Diagnostics._0_is_a_primitive_but_1_is_a_wrapper_object_Prefer_using_0_when_possible, targetType, sourceType);
+                    reportError(Diagnostics._0_is_a_primitive_but_1_is_a_wrapper_object_Prefer_using_0_when_possible, targetType, sourceType);
                 }
             }
 
@@ -9631,25 +9631,25 @@ namespace ts {
         function isLiteralType(type: Type): boolean {
             return type.flags & TypeFlags.Boolean ? true :
                 type.flags & TypeFlags.Union ? type.flags & TypeFlags.Enum ? true : !forEach((<UnionType>type).types, t => !isUnitType(t)) :
-                isUnitType(type);
+                    isUnitType(type);
         }
 
         function getBaseTypeOfLiteralType(type: Type): Type {
             return type.flags & TypeFlags.StringLiteral ? stringType :
                 type.flags & TypeFlags.NumberLiteral ? numberType :
-                type.flags & TypeFlags.BooleanLiteral ? booleanType :
-                type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
-                type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getBaseTypeOfLiteralType)) :
-                type;
+                    type.flags & TypeFlags.BooleanLiteral ? booleanType :
+                        type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
+                            type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getBaseTypeOfLiteralType)) :
+                                type;
         }
 
         function getWidenedLiteralType(type: Type): Type {
             return type.flags & TypeFlags.StringLiteral && type.flags & TypeFlags.FreshLiteral ? stringType :
                 type.flags & TypeFlags.NumberLiteral && type.flags & TypeFlags.FreshLiteral ? numberType :
-                type.flags & TypeFlags.BooleanLiteral ? booleanType :
-                type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
-                type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getWidenedLiteralType)) :
-                type;
+                    type.flags & TypeFlags.BooleanLiteral ? booleanType :
+                        type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
+                            type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getWidenedLiteralType)) :
+                                type;
         }
 
         /**
@@ -9674,9 +9674,9 @@ namespace ts {
         function getFalsyFlags(type: Type): TypeFlags {
             return type.flags & TypeFlags.Union ? getFalsyFlagsOfTypes((<UnionType>type).types) :
                 type.flags & TypeFlags.StringLiteral ? (<LiteralType>type).text === "" ? TypeFlags.StringLiteral : 0 :
-                type.flags & TypeFlags.NumberLiteral ? (<LiteralType>type).text === "0" ? TypeFlags.NumberLiteral : 0 :
-                type.flags & TypeFlags.BooleanLiteral ? type === falseType ? TypeFlags.BooleanLiteral : 0 :
-                type.flags & TypeFlags.PossiblyFalsy;
+                    type.flags & TypeFlags.NumberLiteral ? (<LiteralType>type).text === "0" ? TypeFlags.NumberLiteral : 0 :
+                        type.flags & TypeFlags.BooleanLiteral ? type === falseType ? TypeFlags.BooleanLiteral : 0 :
+                            type.flags & TypeFlags.PossiblyFalsy;
         }
 
         function includeFalsyTypes(type: Type, flags: TypeFlags) {
@@ -10862,8 +10862,8 @@ namespace ts {
                 isTypeSubsetOf(numberType, typeWithPrimitives) && maybeTypeOfKind(typeWithLiterals, TypeFlags.NumberLiteral)) {
                 return mapType(typeWithPrimitives, t =>
                     t.flags & TypeFlags.String ? extractTypesOfKind(typeWithLiterals, TypeFlags.String | TypeFlags.StringLiteral) :
-                    t.flags & TypeFlags.Number ? extractTypesOfKind(typeWithLiterals, TypeFlags.Number | TypeFlags.NumberLiteral) :
-                    t);
+                        t.flags & TypeFlags.Number ? extractTypesOfKind(typeWithLiterals, TypeFlags.Number | TypeFlags.NumberLiteral) :
+                            t);
             }
             return typeWithPrimitives;
         }
@@ -11439,7 +11439,7 @@ namespace ts {
                 const discriminantType = getUnionType(clauseTypes);
                 const caseType =
                     discriminantType.flags & TypeFlags.Never ? neverType :
-                    replacePrimitivesWithLiterals(filterType(type, t => isTypeComparableTo(discriminantType, t)), discriminantType);
+                        replacePrimitivesWithLiterals(filterType(type, t => isTypeComparableTo(discriminantType, t)), discriminantType);
                 if (!hasDefaultClause) {
                     return caseType;
                 }
@@ -11519,8 +11519,8 @@ namespace ts {
                 // two types.
                 return isTypeSubtypeOf(candidate, type) ? candidate :
                     isTypeAssignableTo(type, candidate) ? type :
-                    isTypeAssignableTo(candidate, type) ? candidate :
-                    getIntersectionType([type, candidate]);
+                        isTypeAssignableTo(candidate, type) ? candidate :
+                            getIntersectionType([type, candidate]);
             }
 
             function narrowTypeByTypePredicate(type: Type, callExpression: CallExpression, assumeTrue: boolean): Type {
@@ -11797,7 +11797,7 @@ namespace ts {
                 isInAmbientContext(declaration);
             const initialType = assumeInitialized ? (isParameter ? removeOptionalityFromDeclaredType(type, getRootDeclaration(declaration) as VariableLikeDeclaration) : type) :
                 type === autoType || type === autoArrayType ? undefinedType :
-                includeFalsyTypes(type, TypeFlags.Undefined);
+                    includeFalsyTypes(type, TypeFlags.Undefined);
             const flowType = getFlowTypeOfReference(node, type, initialType, flowContainer, !assumeInitialized);
             // A variable is considered uninitialized when it is possible to analyze the entire control flow graph
             // from declaration to use, and when the variable's declared type doesn't include undefined but the
@@ -12304,7 +12304,7 @@ namespace ts {
                 func.kind === SyntaxKind.GetAccessor ||
                 func.kind === SyntaxKind.SetAccessor) && func.parent.kind === SyntaxKind.ObjectLiteralExpression ? <ObjectLiteralExpression>func.parent :
                 func.kind === SyntaxKind.FunctionExpression && func.parent.kind === SyntaxKind.PropertyAssignment ? <ObjectLiteralExpression>func.parent.parent :
-                undefined;
+                    undefined;
         }
 
         function getThisTypeArgument(type: Type): Type {

From 4562fd089cd19f0f49fe57be9a8a6af800983f98 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Tue, 11 Apr 2017 14:55:26 -0700
Subject: [PATCH 05/22] Store scanning information whether JSXText is just an
 all whitespaces

---
 src/compiler/checker.ts | 9 +++++++--
 src/compiler/parser.ts  | 3 ++-
 src/compiler/scanner.ts | 2 +-
 src/compiler/types.ts   | 3 ++-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 7bbab7005fd13..18ad0c0437c2f 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13318,8 +13318,13 @@ namespace ts {
                 for (const child of (parent as JsxElement).children) {
                     // In React, JSX text that contains only whitespaces will be ignored so we don't want to type-check that
                     // because then type of children property will have constituent of string type.
-                    if (child.kind !== SyntaxKind.JsxTextAllWhiteSpaces) {
-                        childrenTypes.push(child.kind === SyntaxKind.JsxText ? stringType : checkExpression(child as Expression, checkMode));
+                    if (child.kind === SyntaxKind.JsxText) {
+                        if (!child.containsOnlyWhiteSpaces) {
+                            childrenTypes.push(stringType);
+                        }
+                    }
+                    else {
+                        childrenTypes.push(checkExpression(child, checkMode));
                     }
                 }
                 childrenPropSymbol.type = getUnionType(childrenTypes,  /*subtypeReduction*/ false);
diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts
index 770601bd56cd8..cc18fb3260c99 100644
--- a/src/compiler/parser.ts
+++ b/src/compiler/parser.ts
@@ -3825,7 +3825,8 @@ namespace ts {
         }
 
         function parseJsxText(): JsxText {
-            const node = <JsxText>createNode(currentToken, scanner.getStartPos());
+            const node = <JsxText>createNode(SyntaxKind.JsxText, scanner.getStartPos());
+            node.containsOnlyWhiteSpaces = currentToken === SyntaxKind.JsxTextAllWhiteSpaces;
             currentToken = scanner.scanJsxToken();
             return finishNode(node);
         }
diff --git a/src/compiler/scanner.ts b/src/compiler/scanner.ts
index 59453f4fa4b28..2d7ca500893db 100644
--- a/src/compiler/scanner.ts
+++ b/src/compiler/scanner.ts
@@ -1729,7 +1729,6 @@ namespace ts {
             // firstNonWhitespace = 0 to indicate that we want leading whitspace,
 
             while (pos < end) {
-                pos++;
                 char = text.charCodeAt(pos);
                 if (char === CharacterCodes.openBrace) {
                     break;
@@ -1754,6 +1753,7 @@ namespace ts {
                 else if (!isWhiteSpaceSingleLine(char)) {
                     firstNonWhitespace = pos;
                 }
+                pos++;
             }
 
             return firstNonWhitespace === -1 ? SyntaxKind.JsxTextAllWhiteSpaces : SyntaxKind.JsxText;
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index 0e0deeedfaa3b..d52f277c9ef2d 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -1572,7 +1572,8 @@
     }
 
     export interface JsxText extends Node {
-        kind: SyntaxKind.JsxText;
+        kind: SyntaxKind.JsxText,
+        containsOnlyWhiteSpaces: boolean,
         parent?: JsxElement;
     }
 

From c1ea3034d5d02b22ef192939704cc77b97657ce0 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Tue, 11 Apr 2017 15:35:06 -0700
Subject: [PATCH 06/22] wip-fixing consuming whitespace in children

---
 src/compiler/emitter.ts                  | 2 +-
 src/compiler/scanner.ts                  | 8 ++++----
 src/services/formatting/smartIndenter.ts | 2 +-
 src/services/textChanges.ts              | 2 +-
 src/services/utilities.ts                | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/compiler/emitter.ts b/src/compiler/emitter.ts
index 69b5188878f86..669c9f5dd36ee 100644
--- a/src/compiler/emitter.ts
+++ b/src/compiler/emitter.ts
@@ -2457,7 +2457,7 @@ namespace ts {
             let indentation: number;
             for (const line of lines) {
                 for (let i = 0; i < line.length && (indentation === undefined || i < indentation); i++) {
-                    if (!isWhiteSpace(line.charCodeAt(i))) {
+                    if (!isWhiteSpaceLike(line.charCodeAt(i))) {
                         if (indentation === undefined || i < indentation) {
                             indentation = i;
                             break;
diff --git a/src/compiler/scanner.ts b/src/compiler/scanner.ts
index 2d7ca500893db..86699702c3b36 100644
--- a/src/compiler/scanner.ts
+++ b/src/compiler/scanner.ts
@@ -366,7 +366,7 @@ namespace ts {
         return computeLineAndCharacterOfPosition(getLineStarts(sourceFile), position);
     }
 
-    export function isWhiteSpace(ch: number): boolean {
+    export function isWhiteSpaceLike(ch: number): boolean {
         return isWhiteSpaceSingleLine(ch) || isLineBreak(ch);
     }
 
@@ -510,7 +510,7 @@ namespace ts {
                       break;
 
                   default:
-                      if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
+                      if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
                           pos++;
                           continue;
                       }
@@ -691,7 +691,7 @@ namespace ts {
                     }
                     break scan;
                 default:
-                    if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
+                    if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
                         if (hasPendingCommentRange && isLineBreak(ch)) {
                             pendingHasTrailingNewLine = true;
                         }
@@ -1750,7 +1750,7 @@ namespace ts {
                 if (isLineBreak(char) && firstNonWhitespace === 0) {
                     firstNonWhitespace = -1;
                 }
-                else if (!isWhiteSpaceSingleLine(char)) {
+                else if (!isWhiteSpaceLike(char) && (char !== CharacterCodes.openBrace || char !== CharacterCodes.lessThan)) {
                     firstNonWhitespace = pos;
                 }
                 pos++;
diff --git a/src/services/formatting/smartIndenter.ts b/src/services/formatting/smartIndenter.ts
index b5c901482a7bc..01feaf390818e 100644
--- a/src/services/formatting/smartIndenter.ts
+++ b/src/services/formatting/smartIndenter.ts
@@ -54,7 +54,7 @@ namespace ts.formatting {
                 let current = position;
                 while (current > 0) {
                     const char = sourceFile.text.charCodeAt(current);
-                    if (!isWhiteSpace(char)) {
+                    if (!isWhiteSpaceLike(char)) {
                         break;
                     }
                     current--;
diff --git a/src/services/textChanges.ts b/src/services/textChanges.ts
index d7056cfdca241..e63c46ea8cedd 100644
--- a/src/services/textChanges.ts
+++ b/src/services/textChanges.ts
@@ -608,7 +608,7 @@ namespace ts.textChanges {
             if (force || !isTrivia(s)) {
                 this.lastNonTriviaPosition = this.writer.getTextPos();
                 let i = 0;
-                while (isWhiteSpace(s.charCodeAt(s.length - i - 1))) {
+                while (isWhiteSpaceLike(s.charCodeAt(s.length - i - 1))) {
                     i++;
                 }
                 // trim trailing whitespaces
diff --git a/src/services/utilities.ts b/src/services/utilities.ts
index fe9a310ad4bf7..5a1acdf1cec09 100644
--- a/src/services/utilities.ts
+++ b/src/services/utilities.ts
@@ -1381,7 +1381,7 @@ namespace ts {
     }
 
     export function getFirstNonSpaceCharacterPosition(text: string, position: number) {
-        while (isWhiteSpace(text.charCodeAt(position))) {
+        while (isWhiteSpaceLike(text.charCodeAt(position))) {
             position += 1;
         }
         return position;

From 4fa23127fcd9281c39e87120d5f690ec293a7fd8 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Wed, 12 Apr 2017 12:08:12 -0700
Subject: [PATCH 07/22] Fixing consuming whitespace in children

---
 src/compiler/checker.ts                  | 4 +++-
 src/compiler/emitter.ts                  | 2 +-
 src/compiler/scanner.ts                  | 8 ++++----
 src/compiler/types.ts                    | 4 ++--
 src/services/formatting/smartIndenter.ts | 2 +-
 src/services/textChanges.ts              | 2 +-
 src/services/utilities.ts                | 2 +-
 7 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 18ad0c0437c2f..745d38bd04341 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13327,7 +13327,9 @@ namespace ts {
                         childrenTypes.push(checkExpression(child, checkMode));
                     }
                 }
-                childrenPropSymbol.type = getUnionType(childrenTypes,  /*subtypeReduction*/ false);
+                childrenPropSymbol.type = childrenTypes.length === 1 ?
+                    childrenTypes[0] :
+                    createArrayType(getUnionType(childrenTypes,  /*subtypeReduction*/ false));
                 attributesTable.set(jsxChildrenPropertyName, childrenPropSymbol);
                 containsSynthesizedJsxChildren = true;
             }
diff --git a/src/compiler/emitter.ts b/src/compiler/emitter.ts
index 69b5188878f86..669c9f5dd36ee 100644
--- a/src/compiler/emitter.ts
+++ b/src/compiler/emitter.ts
@@ -2457,7 +2457,7 @@ namespace ts {
             let indentation: number;
             for (const line of lines) {
                 for (let i = 0; i < line.length && (indentation === undefined || i < indentation); i++) {
-                    if (!isWhiteSpace(line.charCodeAt(i))) {
+                    if (!isWhiteSpaceLike(line.charCodeAt(i))) {
                         if (indentation === undefined || i < indentation) {
                             indentation = i;
                             break;
diff --git a/src/compiler/scanner.ts b/src/compiler/scanner.ts
index 2d7ca500893db..8f2cacd3e385a 100644
--- a/src/compiler/scanner.ts
+++ b/src/compiler/scanner.ts
@@ -366,7 +366,7 @@ namespace ts {
         return computeLineAndCharacterOfPosition(getLineStarts(sourceFile), position);
     }
 
-    export function isWhiteSpace(ch: number): boolean {
+    export function isWhiteSpaceLike(ch: number): boolean {
         return isWhiteSpaceSingleLine(ch) || isLineBreak(ch);
     }
 
@@ -510,7 +510,7 @@ namespace ts {
                       break;
 
                   default:
-                      if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
+                      if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
                           pos++;
                           continue;
                       }
@@ -691,7 +691,7 @@ namespace ts {
                     }
                     break scan;
                 default:
-                    if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
+                    if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
                         if (hasPendingCommentRange && isLineBreak(ch)) {
                             pendingHasTrailingNewLine = true;
                         }
@@ -1750,7 +1750,7 @@ namespace ts {
                 if (isLineBreak(char) && firstNonWhitespace === 0) {
                     firstNonWhitespace = -1;
                 }
-                else if (!isWhiteSpaceSingleLine(char)) {
+                else if (!isWhiteSpaceLike(char)) {
                     firstNonWhitespace = pos;
                 }
                 pos++;
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index d52f277c9ef2d..fe415431c77eb 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -1572,8 +1572,8 @@
     }
 
     export interface JsxText extends Node {
-        kind: SyntaxKind.JsxText,
-        containsOnlyWhiteSpaces: boolean,
+        kind: SyntaxKind.JsxText;
+        containsOnlyWhiteSpaces: boolean;
         parent?: JsxElement;
     }
 
diff --git a/src/services/formatting/smartIndenter.ts b/src/services/formatting/smartIndenter.ts
index b5c901482a7bc..01feaf390818e 100644
--- a/src/services/formatting/smartIndenter.ts
+++ b/src/services/formatting/smartIndenter.ts
@@ -54,7 +54,7 @@ namespace ts.formatting {
                 let current = position;
                 while (current > 0) {
                     const char = sourceFile.text.charCodeAt(current);
-                    if (!isWhiteSpace(char)) {
+                    if (!isWhiteSpaceLike(char)) {
                         break;
                     }
                     current--;
diff --git a/src/services/textChanges.ts b/src/services/textChanges.ts
index d7056cfdca241..e63c46ea8cedd 100644
--- a/src/services/textChanges.ts
+++ b/src/services/textChanges.ts
@@ -608,7 +608,7 @@ namespace ts.textChanges {
             if (force || !isTrivia(s)) {
                 this.lastNonTriviaPosition = this.writer.getTextPos();
                 let i = 0;
-                while (isWhiteSpace(s.charCodeAt(s.length - i - 1))) {
+                while (isWhiteSpaceLike(s.charCodeAt(s.length - i - 1))) {
                     i++;
                 }
                 // trim trailing whitespaces
diff --git a/src/services/utilities.ts b/src/services/utilities.ts
index fe9a310ad4bf7..5a1acdf1cec09 100644
--- a/src/services/utilities.ts
+++ b/src/services/utilities.ts
@@ -1381,7 +1381,7 @@ namespace ts {
     }
 
     export function getFirstNonSpaceCharacterPosition(text: string, position: number) {
-        while (isWhiteSpace(text.charCodeAt(position))) {
+        while (isWhiteSpaceLike(text.charCodeAt(position))) {
             position += 1;
         }
         return position;

From f0990460a62bda901a0548f3d7e6a579cd06ccce Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Wed, 12 Apr 2017 12:17:27 -0700
Subject: [PATCH 08/22] Add tests

---
 .../jsx/checkJsxChildrenProperty1.tsx         | 27 ++++++++++
 .../jsx/checkJsxChildrenProperty2.tsx         | 49 +++++++++++++++++++
 .../jsx/checkJsxChildrenProperty3.tsx         | 44 +++++++++++++++++
 .../jsx/checkJsxChildrenProperty4.tsx         | 49 +++++++++++++++++++
 .../jsx/checkJsxChildrenProperty5.tsx         | 35 +++++++++++++
 .../jsx/checkJsxChildrenProperty6.tsx         | 48 ++++++++++++++++++
 .../jsx/checkJsxChildrenProperty7.tsx         | 33 +++++++++++++
 .../jsx/checkJsxChildrenProperty8.tsx         | 34 +++++++++++++
 ...tsxStatelessFunctionComponentOverload6.tsx |  2 +-
 ...nInFunctionExpressionOfChildrenCallback.ts | 31 ++++++++++++
 10 files changed, 351 insertions(+), 1 deletion(-)
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
 create mode 100644 tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts

diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
new file mode 100644
index 0000000000000..70b58c03f6ac1
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
@@ -0,0 +1,27 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+let k1 =
+    <Comp a={10} b="hi">
+        hi hi hi!
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        <div>hi hi hi!</div>
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
new file mode 100644
index 0000000000000..0c78f8f41255b
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
@@ -0,0 +1,49 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: missing children
+let k = <Comp a={10} b="hi" />;
+
+let k1 =
+    <Comp a={10} b="hi" children="Random" >
+        hi hi hi!
+    </Comp>;
+
+// Error: incorrect type
+let k2 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {(name: string) => <div> My name {name} </div>}
+    </Comp>;
+
+let k3 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {1000000}
+    </Comp>;
+
+let k4 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        hi hi hi!
+    </Comp>;
+
+let k5 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        <div> My Div </div>
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
new file mode 100644
index 0000000000000..c67c6d5440dce
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
@@ -0,0 +1,44 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Ok
+function UserName0() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
new file mode 100644
index 0000000000000..34877f2000cd3
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
@@ -0,0 +1,49 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Error
+function UserName() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.NAme }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+
+            
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
new file mode 100644
index 0000000000000..6143e4b0fafa9
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
@@ -0,0 +1,35 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: Button;
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: no children specified
+let k = <Comp a={10} b="hi" />;
+
+// Error: JSX.element is not the same as JSX.ElementClass
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        {Button}
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
new file mode 100644
index 0000000000000..c7c709dd369d3
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
@@ -0,0 +1,48 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Ok
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k2 =
+    <Comp a={10} b="hi">
+     
+    
+    
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k3 = <Comp a={10} b="hi"><Button />  
+<AnotherButton />
+</Comp>;
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
new file mode 100644
index 0000000000000..82297737a11de
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
@@ -0,0 +1,33 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: whitespaces matters
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
new file mode 100644
index 0000000000000..eaba752b6a4cb
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
@@ -0,0 +1,34 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element | (string | JSX.Element)[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
index ac0e990142751..f2e799c1c8fce 100644
--- a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
@@ -55,7 +55,7 @@ const b6 = <MainButton {...obj2} />;
 const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
 const b8 = <MainButton {...{onClick() {}}} />;  // OK; method declaration get retained (See GitHub #13365)
 const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
 const b12 = <MainButton data-format="Hello world" />
 
diff --git a/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts b/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts
new file mode 100644
index 0000000000000..0a926e64ac0ed
--- /dev/null
+++ b/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts
@@ -0,0 +1,31 @@
+/// <reference path='fourslash.ts' />
+//@module: commonjs
+//@jsx: preserve
+
+// @Filename: 1.tsx
+//// declare module JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////     }
+////     interface ElementAttributesProperty { props; }
+//// }
+//// interface IUser {
+////     Name: string;
+//// }
+//// interface IFetchUserProps {
+////     children: (user: IUser) => any;
+//// }
+//// function FetchUser(props: IFetchUserProps) { return undefined; }
+//// function UserName() {
+////     return (
+////         <FetchUser>
+////             { user => (
+////                 <h1>{ user./**/ }</h1> 
+////             )}
+////         </FetchUser>
+////     );
+//// }
+
+goTo.marker();
+debugger;
+verify.completionListContains('Name');
\ No newline at end of file

From eb0ad7f3f9432b84fffbe499fc6f0a4edf9b9f1d Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Wed, 12 Apr 2017 12:17:37 -0700
Subject: [PATCH 09/22] update baselines

---
 .../reference/checkJsxChildrenProperty1.js    |  39 +++++
 .../checkJsxChildrenProperty1.symbols         |  67 +++++++++
 .../reference/checkJsxChildrenProperty1.types |  75 ++++++++++
 .../checkJsxChildrenProperty2.errors.txt      | 109 ++++++++++++++
 .../reference/checkJsxChildrenProperty2.js    |  75 ++++++++++
 .../reference/checkJsxChildrenProperty3.js    |  79 ++++++++++
 .../checkJsxChildrenProperty3.symbols         |  99 +++++++++++++
 .../reference/checkJsxChildrenProperty3.types | 116 +++++++++++++++
 .../checkJsxChildrenProperty4.errors.txt      |  61 ++++++++
 .../reference/checkJsxChildrenProperty4.js    |  87 +++++++++++
 .../checkJsxChildrenProperty5.errors.txt      |  62 ++++++++
 .../reference/checkJsxChildrenProperty5.js    |  68 +++++++++
 .../reference/checkJsxChildrenProperty6.js    |  91 ++++++++++++
 .../checkJsxChildrenProperty6.symbols         | 116 +++++++++++++++
 .../reference/checkJsxChildrenProperty6.types | 135 ++++++++++++++++++
 .../checkJsxChildrenProperty7.errors.txt      |  68 +++++++++
 .../reference/checkJsxChildrenProperty7.js    |  66 +++++++++
 .../reference/checkJsxChildrenProperty8.js    |  69 +++++++++
 .../checkJsxChildrenProperty8.symbols         |  98 +++++++++++++
 .../reference/checkJsxChildrenProperty8.types | 117 +++++++++++++++
 ...elessFunctionComponentOverload5.errors.txt |  20 +--
 .../tsxStatelessFunctionComponentOverload6.js |   4 +-
 ...tatelessFunctionComponentOverload6.symbols |   2 +-
 ...xStatelessFunctionComponentOverload6.types |   4 +-
 24 files changed, 1714 insertions(+), 13 deletions(-)
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty1.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty1.symbols
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty1.types
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty2.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty3.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty3.symbols
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty3.types
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty4.errors.txt
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty4.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty5.errors.txt
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty5.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty6.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty6.symbols
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty6.types
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty7.errors.txt
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty7.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty8.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty8.symbols
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty8.types

diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.js b/tests/baselines/reference/checkJsxChildrenProperty1.js
new file mode 100644
index 0000000000000..44c1ca8a72945
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.js
@@ -0,0 +1,39 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+let k1 =
+    <Comp a={10} b="hi">
+        hi hi hi!
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        <div>hi hi hi!</div>
+    </Comp>;
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// OK
+var k = <Comp a={10} b="hi" children="lol"/>;
+var k1 = <Comp a={10} b="hi">
+        hi hi hi!
+    </Comp>;
+var k2 = <Comp a={10} b="hi">
+        <div>hi hi hi!</div>
+    </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.symbols b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
new file mode 100644
index 0000000000000..39b189b7eb4ae
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
@@ -0,0 +1,67 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface Prop {
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    a: number,
+>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
+
+    b: string,
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+
+    children: string | JSX.Element
+>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+function Comp(p: Prop) {
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>p : Symbol(p, Decl(file.tsx, 8, 14))
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    return <div>{p.b}</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>p : Symbol(p, Decl(file.tsx, 8, 14))
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+>k : Symbol(k, Decl(file.tsx, 13, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>a : Symbol(a, Decl(file.tsx, 13, 13))
+>b : Symbol(b, Decl(file.tsx, 13, 20))
+>children : Symbol(children, Decl(file.tsx, 13, 27))
+
+let k1 =
+>k1 : Symbol(k1, Decl(file.tsx, 14, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>a : Symbol(a, Decl(file.tsx, 15, 9))
+>b : Symbol(b, Decl(file.tsx, 15, 16))
+
+        hi hi hi!
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+
+let k2 =
+>k2 : Symbol(k2, Decl(file.tsx, 18, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>a : Symbol(a, Decl(file.tsx, 19, 9))
+>b : Symbol(b, Decl(file.tsx, 19, 16))
+
+        <div>hi hi hi!</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.types b/tests/baselines/reference/checkJsxChildrenProperty1.types
new file mode 100644
index 0000000000000..821f95d9ae71b
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.types
@@ -0,0 +1,75 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface Prop {
+>Prop : Prop
+
+    a: number,
+>a : number
+
+    b: string,
+>b : string
+
+    children: string | JSX.Element
+>children : string | JSX.Element
+>JSX : any
+>Element : JSX.Element
+}
+
+function Comp(p: Prop) {
+>Comp : (p: Prop) => JSX.Element
+>p : Prop
+>Prop : Prop
+
+    return <div>{p.b}</div>;
+><div>{p.b}</div> : JSX.Element
+>div : any
+>p.b : string
+>p : Prop
+>b : string
+>div : any
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+>k : JSX.Element
+><Comp a={10} b="hi" children ="lol" /> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+>children : string
+
+let k1 =
+>k1 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">        hi hi hi!    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+
+        hi hi hi!
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k2 =
+>k2 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">        <div>hi hi hi!</div>    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+
+        <div>hi hi hi!</div>
+><div>hi hi hi!</div> : JSX.Element
+>div : any
+>div : any
+
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
new file mode 100644
index 0000000000000..d3639d6783e01
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
@@ -0,0 +1,109 @@
+tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+    Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+tests/cases/conformance/jsx/file.tsx(17,11): error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(23,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
+        Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
+tests/cases/conformance/jsx/file.tsx(29,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(Element | 1000000)[]' is not assignable to type 'string | Element'.
+        Type '(Element | 1000000)[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type '(Element | 1000000)[]'.
+tests/cases/conformance/jsx/file.tsx(35,11): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'string | Element'.
+        Type '(string | Element)[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type '(string | Element)[]'.
+tests/cases/conformance/jsx/file.tsx(41,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type 'Element[]' is not assignable to type 'string | Element'.
+        Type 'Element[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type 'Element[]'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (6 errors) ====
+    import React = require('react');
+    
+    interface Prop {
+        a: number,
+        b: string,
+        children: string | JSX.Element
+    }
+    
+    function Comp(p: Prop) {
+        return <div>{p.b}</div>;
+    }
+    
+    // Error: missing children
+    let k = <Comp a={10} b="hi" />;
+                  ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+    
+    let k1 =
+        <Comp a={10} b="hi" children="Random" >
+              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
+            hi hi hi!
+        </Comp>;
+    
+    // Error: incorrect type
+    let k2 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
+            <div> My Div </div>
+            {(name: string) => <div> My name {name} </div>}
+        </Comp>;
+    
+    let k3 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(Element | 1000000)[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type '(Element | 1000000)[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type '(Element | 1000000)[]'.
+            <div> My Div </div>
+            {1000000}
+        </Comp>;
+    
+    let k4 =
+        <Comp a={10} b="hi" >
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type '(string | Element)[]'.
+            <div> My Div </div>
+            hi hi hi!
+        </Comp>;
+    
+    let k5 =
+        <Comp a={10} b="hi" >
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type 'Element[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type 'Element[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type 'Element[]'.
+            <div> My Div </div>
+            <div> My Div </div>
+        </Comp>;
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.js b/tests/baselines/reference/checkJsxChildrenProperty2.js
new file mode 100644
index 0000000000000..3de7333fd6d7f
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.js
@@ -0,0 +1,75 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: missing children
+let k = <Comp a={10} b="hi" />;
+
+let k1 =
+    <Comp a={10} b="hi" children="Random" >
+        hi hi hi!
+    </Comp>;
+
+// Error: incorrect type
+let k2 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {(name: string) => <div> My name {name} </div>}
+    </Comp>;
+
+let k3 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {1000000}
+    </Comp>;
+
+let k4 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        hi hi hi!
+    </Comp>;
+
+let k5 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        <div> My Div </div>
+    </Comp>;
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Error: missing children
+var k = <Comp a={10} b="hi"/>;
+var k1 = <Comp a={10} b="hi" children="Random">
+        hi hi hi!
+    </Comp>;
+// Error: incorrect type
+var k2 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        {function (name) { return <div> My name {name} </div>; }}
+    </Comp>;
+var k3 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        {1000000}
+    </Comp>;
+var k4 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        hi hi hi!
+    </Comp>;
+var k5 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        <div> My Div </div>
+    </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.js b/tests/baselines/reference/checkJsxChildrenProperty3.js
new file mode 100644
index 0000000000000..49247925523d0
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.js
@@ -0,0 +1,79 @@
+//// [file.tsx]
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Ok
+function UserName0() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var FetchUser = (function (_super) {
+    __extends(FetchUser, _super);
+    function FetchUser() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FetchUser.prototype.render = function () {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    };
+    return FetchUser;
+}(React.Component));
+// Ok
+function UserName0() {
+    return (<FetchUser>
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+        </FetchUser>);
+}
+function UserName1() {
+    return (<FetchUser>
+
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+        </FetchUser>);
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.symbols b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
new file mode 100644
index 0000000000000..2a1aca621e951
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
@@ -0,0 +1,99 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface IUser {
+>IUser : Symbol(IUser, Decl(file.tsx, 0, 32))
+
+    Name: string;
+>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+}
+
+interface IFetchUserProps {
+>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1))
+
+    children: (user: IUser) => JSX.Element;
+>children : Symbol(IFetchUserProps.children, Decl(file.tsx, 6, 27))
+>user : Symbol(user, Decl(file.tsx, 7, 15))
+>IUser : Symbol(IUser, Decl(file.tsx, 0, 32))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1))
+
+    render() {
+>render : Symbol(FetchUser.render, Decl(file.tsx, 10, 63))
+
+        return this.state
+>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+
+            ? this.props.children(this.state.result)
+>this.props.children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20))
+>this.props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37))
+>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37))
+>children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20))
+>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+
+            : null;
+    }
+}
+
+// Ok
+function UserName0() {
+>UserName0 : Symbol(UserName0, Decl(file.tsx, 16, 1))
+
+    return (
+        <FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+            { user => (
+>user : Symbol(user, Decl(file.tsx, 22, 13))
+
+                <h1>{ user.Name }</h1>
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>user : Symbol(user, Decl(file.tsx, 22, 13))
+>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+
+            ) }
+        </FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+    );
+}
+
+function UserName1() {
+>UserName1 : Symbol(UserName1, Decl(file.tsx, 27, 1))
+
+    return (
+        <FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+            { user => (
+>user : Symbol(user, Decl(file.tsx, 33, 13))
+
+                <h1>{ user.Name }</h1>
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>user : Symbol(user, Decl(file.tsx, 33, 13))
+>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+
+            ) }
+        </FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+    );
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.types b/tests/baselines/reference/checkJsxChildrenProperty3.types
new file mode 100644
index 0000000000000..7fbb91bee0055
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.types
@@ -0,0 +1,116 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface IUser {
+>IUser : IUser
+
+    Name: string;
+>Name : string
+}
+
+interface IFetchUserProps {
+>IFetchUserProps : IFetchUserProps
+
+    children: (user: IUser) => JSX.Element;
+>children : (user: IUser) => JSX.Element
+>user : IUser
+>IUser : IUser
+>JSX : any
+>Element : JSX.Element
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+>FetchUser : FetchUser
+>React.Component : React.Component<IFetchUserProps, any>
+>React : typeof React
+>Component : typeof React.Component
+>IFetchUserProps : IFetchUserProps
+
+    render() {
+>render : () => JSX.Element
+
+        return this.state
+>this.state            ? this.props.children(this.state.result)            : null : JSX.Element
+>this.state : any
+>this : this
+>state : any
+
+            ? this.props.children(this.state.result)
+>this.props.children(this.state.result) : JSX.Element
+>this.props.children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement<any>) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement<any>)[])
+>this.props : IFetchUserProps & { children?: React.ReactNode; }
+>this : this
+>props : IFetchUserProps & { children?: React.ReactNode; }
+>children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement<any>) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement<any>)[])
+>this.state.result : any
+>this.state : any
+>this : this
+>state : any
+>result : any
+
+            : null;
+>null : null
+    }
+}
+
+// Ok
+function UserName0() {
+>UserName0 : () => JSX.Element
+
+    return (
+>(        <FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser>    ) : JSX.Element
+
+        <FetchUser>
+><FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser> : JSX.Element
+>FetchUser : typeof FetchUser
+
+            { user => (
+>user => (                <h1>{ user.Name }</h1>            ) : (user: IUser) => JSX.Element
+>user : IUser
+>(                <h1>{ user.Name }</h1>            ) : JSX.Element
+
+                <h1>{ user.Name }</h1>
+><h1>{ user.Name }</h1> : JSX.Element
+>h1 : any
+>user.Name : string
+>user : IUser
+>Name : string
+>h1 : any
+
+            ) }
+        </FetchUser>
+>FetchUser : typeof FetchUser
+
+    );
+}
+
+function UserName1() {
+>UserName1 : () => JSX.Element
+
+    return (
+>(        <FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser>    ) : JSX.Element
+
+        <FetchUser>
+><FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser> : JSX.Element
+>FetchUser : typeof FetchUser
+
+            { user => (
+>user => (                <h1>{ user.Name }</h1>            ) : (user: IUser) => JSX.Element
+>user : IUser
+>(                <h1>{ user.Name }</h1>            ) : JSX.Element
+
+                <h1>{ user.Name }</h1>
+><h1>{ user.Name }</h1> : JSX.Element
+>h1 : any
+>user.Name : string
+>user : IUser
+>Name : string
+>h1 : any
+
+            ) }
+        </FetchUser>
+>FetchUser : typeof FetchUser
+
+    );
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt
new file mode 100644
index 0000000000000..d12c557102c33
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt
@@ -0,0 +1,61 @@
+tests/cases/conformance/jsx/file.tsx(24,28): error TS2339: Property 'NAme' does not exist on type 'IUser'.
+tests/cases/conformance/jsx/file.tsx(32,9): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
+  Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
+    Types of property 'children' are incompatible.
+      Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
+        Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
+    import React = require('react');
+    
+    interface IUser {
+        Name: string;
+    }
+    
+    interface IFetchUserProps {
+        children: (user: IUser) => JSX.Element;
+    }
+    
+    class FetchUser extends React.Component<IFetchUserProps, any> {
+        render() {
+            return this.state
+                ? this.props.children(this.state.result)
+                : null;
+        }
+    }
+    
+    // Error
+    function UserName() {
+        return (
+            <FetchUser>
+                { user => (
+                    <h1>{ user.NAme }</h1>
+                               ~~~~
+!!! error TS2339: Property 'NAme' does not exist on type 'IUser'.
+                ) }
+            </FetchUser>
+        );
+    }
+    
+    function UserName1() {
+        return (
+            <FetchUser>
+            ~~~~~~~~~~~
+!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
+!!! error TS2322:   Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
+!!! error TS2322:         Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
+    
+    
+                
+                { user => (
+                    <h1>{ user.Name }</h1>
+                ) }
+                { user => (
+                    <h1>{ user.Name }</h1>
+                ) }
+            </FetchUser>
+        );
+    }
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty4.js b/tests/baselines/reference/checkJsxChildrenProperty4.js
new file mode 100644
index 0000000000000..d163ffb0f41b5
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty4.js
@@ -0,0 +1,87 @@
+//// [file.tsx]
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Error
+function UserName() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.NAme }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+
+            
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var FetchUser = (function (_super) {
+    __extends(FetchUser, _super);
+    function FetchUser() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FetchUser.prototype.render = function () {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    };
+    return FetchUser;
+}(React.Component));
+// Error
+function UserName() {
+    return (<FetchUser>
+            {function (user) { return (<h1>{user.NAme}</h1>); }}
+        </FetchUser>);
+}
+function UserName1() {
+    return (<FetchUser>
+
+
+            
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+        </FetchUser>);
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt
new file mode 100644
index 0000000000000..1890bc732d1af
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt
@@ -0,0 +1,62 @@
+tests/cases/conformance/jsx/file.tsx(20,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+    Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+tests/cases/conformance/jsx/file.tsx(24,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type 'Element' is not assignable to type 'Button'.
+        Property 'render' is missing in type 'Element'.
+tests/cases/conformance/jsx/file.tsx(28,11): error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type 'typeof Button' is not assignable to type 'Button'.
+        Property 'render' is missing in type 'typeof Button'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (3 errors) ====
+    import React = require('react');
+    
+    interface Prop {
+        a: number,
+        b: string,
+        children: Button;
+    }
+    
+    class Button extends React.Component<any, any> {
+        render() {
+            return (<div>My Button</div>)
+        }
+    }
+    
+    function Comp(p: Prop) {
+        return <div>{p.b}</div>;
+    }
+    
+    // Error: no children specified
+    let k = <Comp a={10} b="hi" />;
+                  ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+    
+    // Error: JSX.element is not the same as JSX.ElementClass
+    let k1 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type 'Element' is not assignable to type 'Button'.
+!!! error TS2322:         Property 'render' is missing in type 'Element'.
+            <Button />
+        </Comp>;
+    let k2 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type 'typeof Button' is not assignable to type 'Button'.
+!!! error TS2322:         Property 'render' is missing in type 'typeof Button'.
+            {Button}
+        </Comp>;
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty5.js b/tests/baselines/reference/checkJsxChildrenProperty5.js
new file mode 100644
index 0000000000000..a08dae2f25214
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty5.js
@@ -0,0 +1,68 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: Button;
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: no children specified
+let k = <Comp a={10} b="hi" />;
+
+// Error: JSX.element is not the same as JSX.ElementClass
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        {Button}
+    </Comp>;
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Error: no children specified
+var k = <Comp a={10} b="hi"/>;
+// Error: JSX.element is not the same as JSX.ElementClass
+var k1 = <Comp a={10} b="hi">
+        <Button />
+    </Comp>;
+var k2 = <Comp a={10} b="hi">
+        {Button}
+    </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.js b/tests/baselines/reference/checkJsxChildrenProperty6.js
new file mode 100644
index 0000000000000..e433bc520dbe3
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.js
@@ -0,0 +1,91 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Ok
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k2 =
+    <Comp a={10} b="hi">
+     
+    
+    
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k3 = <Comp a={10} b="hi"><Button />  
+<AnotherButton />
+</Comp>;
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function AnotherButton(p) {
+    return <h1>Just Another Button</h1>;
+}
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Ok
+var k1 = <Comp a={10} b="hi">
+        <Button />
+        <AnotherButton />
+    </Comp>;
+var k2 = <Comp a={10} b="hi">
+     
+    
+    
+        <Button />
+        <AnotherButton />
+    </Comp>;
+var k3 = <Comp a={10} b="hi"><Button />  
+<AnotherButton />
+</Comp>;
+var k4 = <Comp a={10} b="hi"><Button /></Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.symbols b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
new file mode 100644
index 0000000000000..df48a53e37d05
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
@@ -0,0 +1,116 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface Prop {
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    a: number,
+>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
+
+    b: string,
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+
+    children: JSX.Element | JSX.Element[];
+>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+class Button extends React.Component<any, any> {
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 8, 48))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>p : Symbol(p, Decl(file.tsx, 14, 23))
+
+    return <h1>Just Another Button</h1>;
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+}
+
+function Comp(p: Prop) {
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    return <div>{p.b}</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+}
+
+// Ok
+let k1 =
+>k1 : Symbol(k1, Decl(file.tsx, 23, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 24, 9))
+>b : Symbol(b, Decl(file.tsx, 24, 16))
+
+        <Button />
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+        <AnotherButton />
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k2 =
+>k2 : Symbol(k2, Decl(file.tsx, 29, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 30, 9))
+>b : Symbol(b, Decl(file.tsx, 30, 16))
+     
+    
+    
+        <Button />
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+        <AnotherButton />
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k3 = <Comp a={10} b="hi"><Button />  
+>k3 : Symbol(k3, Decl(file.tsx, 38, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 38, 14))
+>b : Symbol(b, Decl(file.tsx, 38, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+<AnotherButton />
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+
+</Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
+>k4 : Symbol(k4, Decl(file.tsx, 42, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 42, 14))
+>b : Symbol(b, Decl(file.tsx, 42, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.types b/tests/baselines/reference/checkJsxChildrenProperty6.types
new file mode 100644
index 0000000000000..f9af32072d279
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.types
@@ -0,0 +1,135 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface Prop {
+>Prop : Prop
+
+    a: number,
+>a : number
+
+    b: string,
+>b : string
+
+    children: JSX.Element | JSX.Element[];
+>children : JSX.Element | JSX.Element[]
+>JSX : any
+>Element : JSX.Element
+>JSX : any
+>Element : JSX.Element
+}
+
+class Button extends React.Component<any, any> {
+>Button : Button
+>React.Component : React.Component<any, any>
+>React : typeof React
+>Component : typeof React.Component
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : (p: any) => JSX.Element
+>p : any
+
+    return <h1>Just Another Button</h1>;
+><h1>Just Another Button</h1> : JSX.Element
+>h1 : any
+>h1 : any
+}
+
+function Comp(p: Prop) {
+>Comp : (p: Prop) => JSX.Element
+>p : Prop
+>Prop : Prop
+
+    return <div>{p.b}</div>;
+><div>{p.b}</div> : JSX.Element
+>div : any
+>p.b : string
+>p : Prop
+>b : string
+>div : any
+}
+
+// Ok
+let k1 =
+>k1 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">        <Button />        <AnotherButton />    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+
+        <Button />
+><Button /> : JSX.Element
+>Button : typeof Button
+
+        <AnotherButton />
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k2 =
+>k2 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">                     <Button />        <AnotherButton />    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+     
+    
+    
+        <Button />
+><Button /> : JSX.Element
+>Button : typeof Button
+
+        <AnotherButton />
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k3 = <Comp a={10} b="hi"><Button />  
+>k3 : JSX.Element
+><Comp a={10} b="hi"><Button />  <AnotherButton /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+
+<AnotherButton />
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+
+</Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
+>k4 : JSX.Element
+><Comp a={10} b="hi"><Button /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+>Comp : (p: Prop) => JSX.Element
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt
new file mode 100644
index 0000000000000..ea31d008b2f54
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt
@@ -0,0 +1,68 @@
+tests/cases/conformance/jsx/file.tsx(24,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+        Type '(string | Element)[]' is not assignable to type 'Element[]'.
+          Type 'string | Element' is not assignable to type 'Element'.
+            Type 'string' is not assignable to type 'Element'.
+tests/cases/conformance/jsx/file.tsx(25,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+        Type '(string | Element)[]' is not assignable to type 'Element[]'.
+tests/cases/conformance/jsx/file.tsx(27,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+        Type '(string | Element)[]' is not assignable to type 'Element[]'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (3 errors) ====
+    import React = require('react');
+    
+    interface Prop {
+        a: number,
+        b: string,
+        children: JSX.Element | JSX.Element[];
+    }
+    
+    class Button extends React.Component<any, any> {
+        render() {
+            return (<div>My Button</div>)
+        }
+    }
+    
+    function AnotherButton(p: any) {
+        return <h1>Just Another Button</h1>;
+    }
+    
+    function Comp(p: Prop) {
+        return <div>{p.b}</div>;
+    }
+    
+    // Error: whitespaces matters
+    let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+                   ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element[]'.
+!!! error TS2322:           Type 'string | Element' is not assignable to type 'Element'.
+!!! error TS2322:             Type 'string' is not assignable to type 'Element'.
+    let k2 = <Comp a={10} b="hi"><Button />
+                   ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element[]'.
+        <AnotherButton />  </Comp>;
+    let k3 = <Comp a={10} b="hi">    <Button />
+                   ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element[]'.
+        <AnotherButton /></Comp>;
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty7.js b/tests/baselines/reference/checkJsxChildrenProperty7.js
new file mode 100644
index 0000000000000..6a82233f0bc09
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty7.js
@@ -0,0 +1,66 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: whitespaces matters
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function AnotherButton(p) {
+    return <h1>Just Another Button</h1>;
+}
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Error: whitespaces matters
+var k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+var k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+var k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.js b/tests/baselines/reference/checkJsxChildrenProperty8.js
new file mode 100644
index 0000000000000..50ab16c020476
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.js
@@ -0,0 +1,69 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element | (string | JSX.Element)[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
+
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function AnotherButton(p) {
+    return <h1>Just Another Button</h1>;
+}
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// OK
+var k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+var k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+var k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+var k4 = <Comp a={10} b="hi"><Button />  </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.symbols b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
new file mode 100644
index 0000000000000..92c2e685e71c4
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
@@ -0,0 +1,98 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface Prop {
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    a: number,
+>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
+
+    b: string,
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+
+    children: string | JSX.Element | (string | JSX.Element)[];
+>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+class Button extends React.Component<any, any> {
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 8, 48))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>p : Symbol(p, Decl(file.tsx, 14, 23))
+
+    return <h1>Just Another Button</h1>;
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+}
+
+function Comp(p: Prop) {
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    return <div>{p.b}</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+>k1 : Symbol(k1, Decl(file.tsx, 23, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 23, 14))
+>b : Symbol(b, Decl(file.tsx, 23, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k2 = <Comp a={10} b="hi"><Button />
+>k2 : Symbol(k2, Decl(file.tsx, 24, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 24, 14))
+>b : Symbol(b, Decl(file.tsx, 24, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+    <AnotherButton />  </Comp>;
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k3 = <Comp a={10} b="hi">    <Button />
+>k3 : Symbol(k3, Decl(file.tsx, 26, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 26, 14))
+>b : Symbol(b, Decl(file.tsx, 26, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+    <AnotherButton /></Comp>;
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
+>k4 : Symbol(k4, Decl(file.tsx, 28, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 28, 14))
+>b : Symbol(b, Decl(file.tsx, 28, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.types b/tests/baselines/reference/checkJsxChildrenProperty8.types
new file mode 100644
index 0000000000000..39d94bae72060
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.types
@@ -0,0 +1,117 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface Prop {
+>Prop : Prop
+
+    a: number,
+>a : number
+
+    b: string,
+>b : string
+
+    children: string | JSX.Element | (string | JSX.Element)[];
+>children : string | JSX.Element | (string | JSX.Element)[]
+>JSX : any
+>Element : JSX.Element
+>JSX : any
+>Element : JSX.Element
+}
+
+class Button extends React.Component<any, any> {
+>Button : Button
+>React.Component : React.Component<any, any>
+>React : typeof React
+>Component : typeof React.Component
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : (p: any) => JSX.Element
+>p : any
+
+    return <h1>Just Another Button</h1>;
+><h1>Just Another Button</h1> : JSX.Element
+>h1 : any
+>h1 : any
+}
+
+function Comp(p: Prop) {
+>Comp : (p: Prop) => JSX.Element
+>p : Prop
+>Prop : Prop
+
+    return <div>{p.b}</div>;
+><div>{p.b}</div> : JSX.Element
+>div : any
+>p.b : string
+>p : Prop
+>b : string
+>div : any
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+>k1 : JSX.Element
+><Comp a={10} b="hi"><Button />  <AnotherButton /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+>Comp : (p: Prop) => JSX.Element
+
+let k2 = <Comp a={10} b="hi"><Button />
+>k2 : JSX.Element
+><Comp a={10} b="hi"><Button />    <AnotherButton />  </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+
+    <AnotherButton />  </Comp>;
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+>Comp : (p: Prop) => JSX.Element
+
+let k3 = <Comp a={10} b="hi">    <Button />
+>k3 : JSX.Element
+><Comp a={10} b="hi">    <Button />    <AnotherButton /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+
+    <AnotherButton /></Comp>;
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+>Comp : (p: Prop) => JSX.Element
+
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
+>k4 : JSX.Element
+><Comp a={10} b="hi"><Button />  </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+>Comp : (p: Prop) => JSX.Element
+
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt b/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
index 0333a6810cb7f..c36a04dbe315c 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
@@ -1,7 +1,9 @@
-tests/cases/conformance/jsx/file.tsx(48,24): error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-  Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
-tests/cases/conformance/jsx/file.tsx(49,24): error TS2322: Type '{ to: string; onClick: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-  Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
+tests/cases/conformance/jsx/file.tsx(48,24): error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+  Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'HyphenProps'.
+    Property '"data-format"' is missing in type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }'.
+tests/cases/conformance/jsx/file.tsx(49,24): error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+  Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'HyphenProps'.
+    Property '"data-format"' is missing in type '{ to: string; onClick: (e: any) => void; children: string; }'.
 tests/cases/conformance/jsx/file.tsx(50,24): error TS2322: Type '{ onClick: () => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
   Property 'onClick' does not exist on type 'IntrinsicAttributes & HyphenProps'.
 tests/cases/conformance/jsx/file.tsx(51,24): error TS2322: Type '{ onClick: (k: MouseEvent<any>) => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
@@ -68,12 +70,14 @@ tests/cases/conformance/jsx/file.tsx(56,24): error TS2322: Type '{ data-format:
     // Error
     const b0 = <MainButton to='/some/path' onClick={(e)=>{}}>GO</MainButton>;  // extra property;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-!!! error TS2322:   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
+!!! error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+!!! error TS2322:   Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'HyphenProps'.
+!!! error TS2322:     Property '"data-format"' is missing in type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }'.
     const b1 = <MainButton onClick={(e: any)=> {}} {...obj0}>Hello world</MainButton>;  // extra property;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS2322: Type '{ to: string; onClick: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-!!! error TS2322:   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
+!!! error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+!!! error TS2322:   Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'HyphenProps'.
+!!! error TS2322:     Property '"data-format"' is missing in type '{ to: string; onClick: (e: any) => void; children: string; }'.
     const b2 = <MainButton {...{to: "10000"}} {...obj2} />;  // extra property
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 !!! error TS2322: Type '{ onClick: () => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js
index 92219fb662b0e..c1ec4ccd0bf7a 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js
@@ -50,7 +50,7 @@ const b6 = <MainButton {...obj2} />;
 const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
 const b8 = <MainButton {...{onClick() {}}} />;  // OK; method declaration get retained (See GitHub #13365)
 const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
 const b12 = <MainButton data-format="Hello world" />
 
@@ -88,7 +88,7 @@ define(["require", "exports", "react"], function (require, exports, React) {
     var b7 = <MainButton {...{ onClick: function () { console.log("hi"); } }}/>;
     var b8 = <MainButton {...{ onClick: function () { } }}/>; // OK; method declaration get retained (See GitHub #13365)
     var b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
-    var b10 = <MainButton to='/some/path' children="hi">GO</MainButton>;
+    var b10 = <MainButton to='/some/path' children="hi"></MainButton>;
     var b11 = <MainButton onClick={function (e) { }} className="hello" data-format>Hello world</MainButton>;
     var b12 = <MainButton data-format="Hello world"/>;
 });
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols
index d1f7cfadf9a13..c644448497317 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols
@@ -165,7 +165,7 @@ const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
 >extra-prop : Symbol(extra-prop, Decl(file.tsx, 50, 38))
 >MainButton : Symbol(MainButton, Decl(file.tsx, 26, 1), Decl(file.tsx, 28, 66), Decl(file.tsx, 29, 62), Decl(file.tsx, 30, 66))
 
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 >b10 : Symbol(b10, Decl(file.tsx, 51, 5))
 >MainButton : Symbol(MainButton, Decl(file.tsx, 26, 1), Decl(file.tsx, 28, 66), Decl(file.tsx, 29, 62), Decl(file.tsx, 30, 66))
 >to : Symbol(to, Decl(file.tsx, 51, 23))
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types
index 0db50bc1903b1..6f7f04e3cf3b3 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types
@@ -197,9 +197,9 @@ const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
 >extra-prop : true
 >MainButton : { (buttonProps: ButtonProps): JSX.Element; (linkProps: LinkProps): JSX.Element; (hyphenProps: HyphenProps): JSX.Element; }
 
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 >b10 : JSX.Element
-><MainButton to='/some/path' children="hi" >GO</MainButton> : JSX.Element
+><MainButton to='/some/path' children="hi" ></MainButton> : JSX.Element
 >MainButton : { (buttonProps: ButtonProps): JSX.Element; (linkProps: LinkProps): JSX.Element; (hyphenProps: HyphenProps): JSX.Element; }
 >to : string
 >children : string

From 012f4595942430e4c035a9fc8853feb9f8e2cdbc Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Wed, 12 Apr 2017 12:28:34 -0700
Subject: [PATCH 10/22] Fix linting error

---
 src/compiler/checker.ts | 2 +-
 src/compiler/scanner.ts | 2 +-
 src/compiler/types.ts   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 745d38bd04341..0648ac88e059d 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -1,4 +1,4 @@
-/// <reference path="moduleNameResolver.ts"/>
+/// <reference path="moduleNameResolver.ts"/>
 /// <reference path="binder.ts"/>
 
 /* @internal */
diff --git a/src/compiler/scanner.ts b/src/compiler/scanner.ts
index 7f1f0de7df82e..1e070686de218 100644
--- a/src/compiler/scanner.ts
+++ b/src/compiler/scanner.ts
@@ -1750,7 +1750,7 @@ namespace ts {
                 if (isLineBreak(char) && firstNonWhitespace === 0) {
                     firstNonWhitespace = -1;
                 }
-                else if (!isWhiteSpaceLike(char)) {
+                else if (!isWhiteSpaceLike(char)) {
                     firstNonWhitespace = pos;
                 }
                 pos++;
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index fe415431c77eb..735deb25f1a06 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -1,4 +1,4 @@
-namespace ts {
+namespace ts {
     /**
      * Type of objects whose values are all of the same type.
      * The `in` and `for-in` operators can *not* be safely used,

From 58e2189f450b6f0dcc17f254df3b34f291425d82 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Wed, 12 Apr 2017 13:38:11 -0700
Subject: [PATCH 11/22] Add tests and update baselines

---
 src/compiler/scanner.ts                       |   2 +-
 .../checkJsxChildrenProperty2.errors.txt      |  23 +-
 .../reference/checkJsxChildrenProperty2.js    |  18 +-
 .../tsxStatelessFunctionComponentOverload1.js |   4 +
 ...tatelessFunctionComponentOverload1.symbols | 197 ++++++++++--------
 ...xStatelessFunctionComponentOverload1.types |  32 ++-
 ...elessFunctionComponentOverload4.errors.txt |  23 +-
 .../tsxStatelessFunctionComponentOverload4.js |   5 +
 .../jsx/checkJsxChildrenProperty2.tsx         |  10 +-
 ...tsxStatelessFunctionComponentOverload1.tsx |   3 +
 ...tsxStatelessFunctionComponentOverload4.tsx |   3 +
 11 files changed, 208 insertions(+), 112 deletions(-)

diff --git a/src/compiler/scanner.ts b/src/compiler/scanner.ts
index 1e070686de218..8f2cacd3e385a 100644
--- a/src/compiler/scanner.ts
+++ b/src/compiler/scanner.ts
@@ -1,4 +1,4 @@
-/// <reference path="core.ts"/>
+/// <reference path="core.ts"/>
 /// <reference path="diagnosticInformationMap.generated.ts"/>
 
 namespace ts {
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
index d3639d6783e01..ecde87c6fbf6e 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
@@ -2,25 +2,26 @@ tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: 10; b: "hi
   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
 tests/cases/conformance/jsx/file.tsx(17,11): error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
-tests/cases/conformance/jsx/file.tsx(23,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(25,11): error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(31,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
         Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
           Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
-tests/cases/conformance/jsx/file.tsx(29,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(37,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(Element | 1000000)[]' is not assignable to type 'string | Element'.
         Type '(Element | 1000000)[]' is not assignable to type 'Element'.
           Property 'type' is missing in type '(Element | 1000000)[]'.
-tests/cases/conformance/jsx/file.tsx(35,11): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(43,11): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(string | Element)[]' is not assignable to type 'string | Element'.
         Type '(string | Element)[]' is not assignable to type 'Element'.
           Property 'type' is missing in type '(string | Element)[]'.
-tests/cases/conformance/jsx/file.tsx(41,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type 'Element[]' is not assignable to type 'string | Element'.
@@ -28,7 +29,7 @@ tests/cases/conformance/jsx/file.tsx(41,11): error TS2322: Type '{ a: 10; b: "hi
           Property 'type' is missing in type 'Element[]'.
 
 
-==== tests/cases/conformance/jsx/file.tsx (6 errors) ====
+==== tests/cases/conformance/jsx/file.tsx (7 errors) ====
     import React = require('react');
     
     interface Prop {
@@ -48,13 +49,23 @@ tests/cases/conformance/jsx/file.tsx(41,11): error TS2322: Type '{ a: 10; b: "hi
 !!! error TS2322:   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
     
-    let k1 =
+    let k0 =
         <Comp a={10} b="hi" children="Random" >
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 !!! error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
             hi hi hi!
         </Comp>;
     
+    let o = {
+         children:"Random"
+    }
+    let k1 =
+        <Comp a={10} b="hi" {...o} >
+              ~~~~~~~~~~~~~~~~~~~~
+!!! error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
+            hi hi hi!
+        </Comp>;
+    
     // Error: incorrect type
     let k2 =
         <Comp a={10} b="hi">
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.js b/tests/baselines/reference/checkJsxChildrenProperty2.js
index 3de7333fd6d7f..dd92bb5dba899 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty2.js
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.js
@@ -14,11 +14,19 @@ function Comp(p: Prop) {
 // Error: missing children
 let k = <Comp a={10} b="hi" />;
 
-let k1 =
+let k0 =
     <Comp a={10} b="hi" children="Random" >
         hi hi hi!
     </Comp>;
 
+let o = {
+     children:"Random"
+}
+let k1 =
+    <Comp a={10} b="hi" {...o} >
+        hi hi hi!
+    </Comp>;
+
 // Error: incorrect type
 let k2 =
     <Comp a={10} b="hi">
@@ -53,7 +61,13 @@ function Comp(p) {
 }
 // Error: missing children
 var k = <Comp a={10} b="hi"/>;
-var k1 = <Comp a={10} b="hi" children="Random">
+var k0 = <Comp a={10} b="hi" children="Random">
+        hi hi hi!
+    </Comp>;
+var o = {
+    children: "Random"
+};
+var k1 = <Comp a={10} b="hi" {...o}>
         hi hi hi!
     </Comp>;
 // Error: incorrect type
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js
index 825a625eb29cc..09eb20c755fd0 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js
@@ -2,6 +2,7 @@
 import React = require('react')
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
@@ -11,6 +12,8 @@ const c1 = <OneThing yxx='ok' />
 const c2 = <OneThing yy={100}  yy1="hello"/>
 const c3 = <OneThing yxx="hello" ignore-prop />
 const c4 = <OneThing data="hello" data-prop />
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+
 
 declare function TestingOneThing({y1: string}): JSX.Element;
 declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
@@ -48,6 +51,7 @@ define(["require", "exports", "react"], function (require, exports, React) {
     var c2 = <OneThing yy={100} yy1="hello"/>;
     var c3 = <OneThing yxx="hello" ignore-prop/>;
     var c4 = <OneThing data="hello" data-prop/>;
+    var c5 = <OneThing yxx1='ok'>Hello</OneThing>;
     // OK
     var d1 = <TestingOneThing y1 extra-data/>;
     var d2 = <TestingOneThing extra-data="hello"/>;
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols
index b2de411e24754..809766f59d385 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols
@@ -3,173 +3,188 @@ import React = require('react')
 >React : Symbol(React, Decl(file.tsx, 0, 0))
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
 >k : Symbol(k, Decl(file.tsx, 2, 26))
 >yxx : Symbol(yxx, Decl(file.tsx, 2, 30))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
-declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->l : Symbol(l, Decl(file.tsx, 3, 26))
->yy : Symbol(yy, Decl(file.tsx, 3, 30))
->yy1 : Symbol(yy1, Decl(file.tsx, 3, 41))
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>k : Symbol(k, Decl(file.tsx, 3, 26))
+>yxx1 : Symbol(yxx1, Decl(file.tsx, 3, 30))
+>children : Symbol(children, Decl(file.tsx, 3, 43))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
-declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
+declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
 >l : Symbol(l, Decl(file.tsx, 4, 26))
 >yy : Symbol(yy, Decl(file.tsx, 4, 30))
 >yy1 : Symbol(yy1, Decl(file.tsx, 4, 41))
->yy2 : Symbol(yy2, Decl(file.tsx, 4, 54))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+
+declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>l : Symbol(l, Decl(file.tsx, 5, 26))
+>yy : Symbol(yy, Decl(file.tsx, 5, 30))
+>yy1 : Symbol(yy1, Decl(file.tsx, 5, 41))
+>yy2 : Symbol(yy2, Decl(file.tsx, 5, 54))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->l1 : Symbol(l1, Decl(file.tsx, 5, 26))
->data : Symbol(data, Decl(file.tsx, 5, 31))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>l1 : Symbol(l1, Decl(file.tsx, 6, 26))
+>data : Symbol(data, Decl(file.tsx, 6, 31))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 // OK
 const c1 = <OneThing yxx='ok' />
->c1 : Symbol(c1, Decl(file.tsx, 8, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->yxx : Symbol(yxx, Decl(file.tsx, 8, 20))
+>c1 : Symbol(c1, Decl(file.tsx, 9, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yxx : Symbol(yxx, Decl(file.tsx, 9, 20))
 
 const c2 = <OneThing yy={100}  yy1="hello"/>
->c2 : Symbol(c2, Decl(file.tsx, 9, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->yy : Symbol(yy, Decl(file.tsx, 9, 20))
->yy1 : Symbol(yy1, Decl(file.tsx, 9, 29))
+>c2 : Symbol(c2, Decl(file.tsx, 10, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yy : Symbol(yy, Decl(file.tsx, 10, 20))
+>yy1 : Symbol(yy1, Decl(file.tsx, 10, 29))
 
 const c3 = <OneThing yxx="hello" ignore-prop />
->c3 : Symbol(c3, Decl(file.tsx, 10, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->yxx : Symbol(yxx, Decl(file.tsx, 10, 20))
->ignore-prop : Symbol(ignore-prop, Decl(file.tsx, 10, 32))
+>c3 : Symbol(c3, Decl(file.tsx, 11, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yxx : Symbol(yxx, Decl(file.tsx, 11, 20))
+>ignore-prop : Symbol(ignore-prop, Decl(file.tsx, 11, 32))
 
 const c4 = <OneThing data="hello" data-prop />
->c4 : Symbol(c4, Decl(file.tsx, 11, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->data : Symbol(data, Decl(file.tsx, 11, 20))
->data-prop : Symbol(data-prop, Decl(file.tsx, 11, 33))
+>c4 : Symbol(c4, Decl(file.tsx, 12, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>data : Symbol(data, Decl(file.tsx, 12, 20))
+>data-prop : Symbol(data-prop, Decl(file.tsx, 12, 33))
+
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+>c5 : Symbol(c5, Decl(file.tsx, 13, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yxx1 : Symbol(yxx1, Decl(file.tsx, 13, 20))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+
 
 declare function TestingOneThing({y1: string}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
 >y1 : Symbol(y1)
->string : Symbol(string, Decl(file.tsx, 13, 34))
+>string : Symbol(string, Decl(file.tsx, 16, 34))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->j : Symbol(j, Decl(file.tsx, 14, 33))
->yy : Symbol(yy, Decl(file.tsx, 14, 58))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>j : Symbol(j, Decl(file.tsx, 17, 33))
+>yy : Symbol(yy, Decl(file.tsx, 17, 58))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOneThing(n: {yy: number, direction?: number}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->n : Symbol(n, Decl(file.tsx, 15, 33))
->yy : Symbol(yy, Decl(file.tsx, 15, 37))
->direction : Symbol(direction, Decl(file.tsx, 15, 48))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>n : Symbol(n, Decl(file.tsx, 18, 33))
+>yy : Symbol(yy, Decl(file.tsx, 18, 37))
+>direction : Symbol(direction, Decl(file.tsx, 18, 48))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOneThing(n: {yy: string, name: string}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->n : Symbol(n, Decl(file.tsx, 16, 33))
->yy : Symbol(yy, Decl(file.tsx, 16, 37))
->name : Symbol(name, Decl(file.tsx, 16, 48))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>n : Symbol(n, Decl(file.tsx, 19, 33))
+>yy : Symbol(yy, Decl(file.tsx, 19, 37))
+>name : Symbol(name, Decl(file.tsx, 19, 48))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 // OK
 const d1 = <TestingOneThing y1 extra-data />;
->d1 : Symbol(d1, Decl(file.tsx, 19, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->y1 : Symbol(y1, Decl(file.tsx, 19, 27))
->extra-data : Symbol(extra-data, Decl(file.tsx, 19, 30))
+>d1 : Symbol(d1, Decl(file.tsx, 22, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>y1 : Symbol(y1, Decl(file.tsx, 22, 27))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 22, 30))
 
 const d2 = <TestingOneThing extra-data="hello" />;
->d2 : Symbol(d2, Decl(file.tsx, 20, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 20, 27))
+>d2 : Symbol(d2, Decl(file.tsx, 23, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 23, 27))
 
 const d3 = <TestingOneThing extra-data="hello" yy="hihi" />;
->d3 : Symbol(d3, Decl(file.tsx, 21, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 21, 27))
->yy : Symbol(yy, Decl(file.tsx, 21, 46))
+>d3 : Symbol(d3, Decl(file.tsx, 24, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 24, 27))
+>yy : Symbol(yy, Decl(file.tsx, 24, 46))
 
 const d4 = <TestingOneThing extra-data="hello" yy={9} direction={10} />;
->d4 : Symbol(d4, Decl(file.tsx, 22, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 22, 27))
->yy : Symbol(yy, Decl(file.tsx, 22, 46))
->direction : Symbol(direction, Decl(file.tsx, 22, 53))
+>d4 : Symbol(d4, Decl(file.tsx, 25, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 25, 27))
+>yy : Symbol(yy, Decl(file.tsx, 25, 46))
+>direction : Symbol(direction, Decl(file.tsx, 25, 53))
 
 const d5 = <TestingOneThing extra-data="hello" yy="hello" name="Bob" />;
->d5 : Symbol(d5, Decl(file.tsx, 23, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 23, 27))
->yy : Symbol(yy, Decl(file.tsx, 23, 46))
->name : Symbol(name, Decl(file.tsx, 23, 57))
+>d5 : Symbol(d5, Decl(file.tsx, 26, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 26, 27))
+>yy : Symbol(yy, Decl(file.tsx, 26, 46))
+>name : Symbol(name, Decl(file.tsx, 26, 57))
 
 
 declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->a : Symbol(a, Decl(file.tsx, 26, 33))
->y1 : Symbol(y1, Decl(file.tsx, 26, 37))
->y2 : Symbol(y2, Decl(file.tsx, 26, 49))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>a : Symbol(a, Decl(file.tsx, 29, 33))
+>y1 : Symbol(y1, Decl(file.tsx, 29, 37))
+>y2 : Symbol(y2, Decl(file.tsx, 29, 49))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->a : Symbol(a, Decl(file.tsx, 27, 33))
->y1 : Symbol(y1, Decl(file.tsx, 27, 37))
->y2 : Symbol(y2, Decl(file.tsx, 27, 49))
->y3 : Symbol(y3, Decl(file.tsx, 27, 62))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>a : Symbol(a, Decl(file.tsx, 30, 33))
+>y1 : Symbol(y1, Decl(file.tsx, 30, 37))
+>y2 : Symbol(y2, Decl(file.tsx, 30, 49))
+>y3 : Symbol(y3, Decl(file.tsx, 30, 62))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 // OK
 const e1 = <TestingOptional />
->e1 : Symbol(e1, Decl(file.tsx, 30, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
+>e1 : Symbol(e1, Decl(file.tsx, 33, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
 
 const e2 = <TestingOptional extra-prop/>
->e2 : Symbol(e2, Decl(file.tsx, 31, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->extra-prop : Symbol(extra-prop, Decl(file.tsx, 31, 27))
+>e2 : Symbol(e2, Decl(file.tsx, 34, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>extra-prop : Symbol(extra-prop, Decl(file.tsx, 34, 27))
 
 const e3 = <TestingOptional y1="hello"/>
->e3 : Symbol(e3, Decl(file.tsx, 32, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 32, 27))
+>e3 : Symbol(e3, Decl(file.tsx, 35, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 35, 27))
 
 const e4 = <TestingOptional y1="hello" y2={1000} />
->e4 : Symbol(e4, Decl(file.tsx, 33, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 33, 27))
->y2 : Symbol(y2, Decl(file.tsx, 33, 38))
+>e4 : Symbol(e4, Decl(file.tsx, 36, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 36, 27))
+>y2 : Symbol(y2, Decl(file.tsx, 36, 38))
 
 const e5 = <TestingOptional y1 y3/>
->e5 : Symbol(e5, Decl(file.tsx, 34, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 34, 27))
->y3 : Symbol(y3, Decl(file.tsx, 34, 30))
+>e5 : Symbol(e5, Decl(file.tsx, 37, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 37, 27))
+>y3 : Symbol(y3, Decl(file.tsx, 37, 30))
 
 const e6 = <TestingOptional y1 y3 y2={10} />
->e6 : Symbol(e6, Decl(file.tsx, 35, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 35, 27))
->y3 : Symbol(y3, Decl(file.tsx, 35, 30))
->y2 : Symbol(y2, Decl(file.tsx, 35, 33))
+>e6 : Symbol(e6, Decl(file.tsx, 38, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 38, 27))
+>y3 : Symbol(y3, Decl(file.tsx, 38, 30))
+>y2 : Symbol(y2, Decl(file.tsx, 38, 33))
 
 
 
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types
index 22ef23bcae9a3..8e288ebd34ab0 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types
@@ -3,14 +3,22 @@ import React = require('react')
 >React : typeof React
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >k : { yxx: string; }
 >yxx : string
 >JSX : any
 >Element : JSX.Element
 
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>k : { yxx1: string; children: string; }
+>yxx1 : string
+>children : string
+>JSX : any
+>Element : JSX.Element
+
 declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >l : { yy: number; yy1: string; }
 >yy : number
 >yy1 : string
@@ -18,7 +26,7 @@ declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
 >Element : JSX.Element
 
 declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >l : { yy: number; yy1: string; yy2: boolean; }
 >yy : number
 >yy1 : string
@@ -27,7 +35,7 @@ declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Eleme
 >Element : JSX.Element
 
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >l1 : { data: string; "data-prop": boolean; }
 >data : string
 >JSX : any
@@ -37,13 +45,13 @@ declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element
 const c1 = <OneThing yxx='ok' />
 >c1 : JSX.Element
 ><OneThing yxx='ok' /> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >yxx : string
 
 const c2 = <OneThing yy={100}  yy1="hello"/>
 >c2 : JSX.Element
 ><OneThing yy={100}  yy1="hello"/> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >yy : number
 >100 : 100
 >yy1 : string
@@ -51,17 +59,25 @@ const c2 = <OneThing yy={100}  yy1="hello"/>
 const c3 = <OneThing yxx="hello" ignore-prop />
 >c3 : JSX.Element
 ><OneThing yxx="hello" ignore-prop /> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >yxx : string
 >ignore-prop : true
 
 const c4 = <OneThing data="hello" data-prop />
 >c4 : JSX.Element
 ><OneThing data="hello" data-prop /> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >data : string
 >data-prop : true
 
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+>c5 : JSX.Element
+><OneThing yxx1='ok'>Hello</OneThing> : JSX.Element
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>yxx1 : string
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+
+
 declare function TestingOneThing({y1: string}): JSX.Element;
 >TestingOneThing : { ({y1: string}: { y1: any; }): JSX.Element; (j: { "extra-data": string; yy?: string; }): JSX.Element; (n: { yy: number; direction?: number; }): JSX.Element; (n: { yy: string; name: string; }): JSX.Element; }
 >y1 : any
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
index 9995610b8746e..8b95f86efd759 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
@@ -22,17 +22,23 @@ tests/cases/conformance/jsx/file.tsx(26,29): error TS2322: Type '{ yy: "hello";
   Type '{ yy: "hello"; direction: "left"; }' is not assignable to type '{ yy: string; direction?: number; }'.
     Types of property 'direction' are incompatible.
       Type '"left"' is not assignable to type 'number'.
-tests/cases/conformance/jsx/file.tsx(32,29): error TS2322: Type '{ y1: true; y3: "hello"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: true; y3: "hello"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
   Type '{ y1: true; y3: "hello"; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
     Types of property 'y3' are incompatible.
       Type '"hello"' is not assignable to type 'boolean'.
-tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+tests/cases/conformance/jsx/file.tsx(34,29): error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
   Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
     Types of property 'y1' are incompatible.
       Type '"hello"' is not assignable to type 'boolean'.
+tests/cases/conformance/jsx/file.tsx(35,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: "hi"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+  Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+tests/cases/conformance/jsx/file.tsx(36,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+  Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
+    Types of property 'y1' are incompatible.
+      Type '"hello"' is not assignable to type 'boolean'.
 
 
-==== tests/cases/conformance/jsx/file.tsx (10 errors) ====
+==== tests/cases/conformance/jsx/file.tsx (12 errors) ====
     import React = require('react')
     declare function OneThing(): JSX.Element;
     declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
@@ -93,6 +99,7 @@ tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello";
 !!! error TS2322:       Type '"left"' is not assignable to type 'number'.
     
     declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+    declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
     declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
     
     // Error
@@ -107,5 +114,15 @@ tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello";
 !!! error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
 !!! error TS2322:   Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
 !!! error TS2322:     Types of property 'y1' are incompatible.
+!!! error TS2322:       Type '"hello"' is not assignable to type 'boolean'.
+    const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
+                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2322: Type '{ y1: "hello"; y2: 1000; children: "hi"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+!!! error TS2322:   Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+    const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
+                                ~~~~~~~~~~~~~~~~~~~~
+!!! error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+!!! error TS2322:   Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
+!!! error TS2322:     Types of property 'y1' are incompatible.
 !!! error TS2322:       Type '"hello"' is not assignable to type 'boolean'.
     
\ No newline at end of file
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js
index a4d329409a273..8da2bee37ea5c 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js
@@ -27,11 +27,14 @@ const d1 = <TestingOneThing extra-data />
 const d2 = <TestingOneThing yy="hello" direction="left" />
 
 declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
 declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
 
 // Error
 const e1 = <TestingOptional y1 y3="hello"/>
 const e2 = <TestingOptional y1="hello" y2={1000} y3 />
+const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
+const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
 
 
 //// [file.jsx]
@@ -58,4 +61,6 @@ define(["require", "exports", "react"], function (require, exports, React) {
     // Error
     var e1 = <TestingOptional y1 y3="hello"/>;
     var e2 = <TestingOptional y1="hello" y2={1000} y3/>;
+    var e3 = <TestingOptional y1="hello" y2={1000} children="hi"/>;
+    var e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>;
 });
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
index 0c78f8f41255b..65bc0f50b120a 100644
--- a/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
@@ -18,11 +18,19 @@ function Comp(p: Prop) {
 // Error: missing children
 let k = <Comp a={10} b="hi" />;
 
-let k1 =
+let k0 =
     <Comp a={10} b="hi" children="Random" >
         hi hi hi!
     </Comp>;
 
+let o = {
+     children:"Random"
+}
+let k1 =
+    <Comp a={10} b="hi" {...o} >
+        hi hi hi!
+    </Comp>;
+
 // Error: incorrect type
 let k2 =
     <Comp a={10} b="hi">
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
index ea950d8b6d488..d8897321f0b3d 100644
--- a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
@@ -7,6 +7,7 @@
 import React = require('react')
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
@@ -16,6 +17,8 @@ const c1 = <OneThing yxx='ok' />
 const c2 = <OneThing yy={100}  yy1="hello"/>
 const c3 = <OneThing yxx="hello" ignore-prop />
 const c4 = <OneThing data="hello" data-prop />
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+
 
 declare function TestingOneThing({y1: string}): JSX.Element;
 declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
index 377878931b818..7700fed6902b3 100644
--- a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
@@ -32,8 +32,11 @@ const d1 = <TestingOneThing extra-data />
 const d2 = <TestingOneThing yy="hello" direction="left" />
 
 declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
 declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
 
 // Error
 const e1 = <TestingOptional y1 y3="hello"/>
 const e2 = <TestingOptional y1="hello" y2={1000} y3 />
+const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
+const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>

From bb8bab3ae3b1f70ed526811bfe9d00c608c98cab Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Fri, 14 Apr 2017 15:21:49 -0700
Subject: [PATCH 12/22] Remove a flag indicating the children is
 synthesized..We will give an error if you use children without specified such
 property

---
 src/compiler/checker.ts | 19 +++++++------------
 src/compiler/types.ts   |  2 --
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 0648ac88e059d..a6a3e34645b41 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -8650,7 +8650,7 @@ namespace ts {
             // is considered known if the object type is empty and the check is for assignability, if the object type has
             // index signatures, or if the property is actually declared in the object type. In a union or intersection
             // type, a property is considered known if it is known in any constituent type.
-            function isKnownProperty(type: Type, name: string, isComparingJsxAttributes: boolean, containsSynthesizedJsxChildren: boolean): boolean {
+            function isKnownProperty(type: Type, name: string, isComparingJsxAttributes: boolean): boolean {
                 if (type.flags & TypeFlags.Object) {
                     const resolved = resolveStructuredTypeMembers(<ObjectType>type);
                     if ((relation === assignableRelation || relation === comparableRelation) &&
@@ -8660,16 +8660,14 @@ namespace ts {
                     else if (resolved.stringIndexInfo || (resolved.numberIndexInfo && isNumericLiteralName(name))) {
                         return true;
                     }
-                    else if (getPropertyOfType(type, name) || containsSynthesizedJsxChildren || (isComparingJsxAttributes && !isUnhyphenatedJsxName(name))) {
-                        // For JSXAttributes, consider that the attribute to be known if
-                        //      1. the attribute has a hyphenated name
-                        //      2. "children" attribute that is synthesized from children property of Jsx element
+                    else if (getPropertyOfType(type, name) || (isComparingJsxAttributes && !isUnhyphenatedJsxName(name))) {
+                        // For JSXAttributes, consider that the attribute to be known if the attribute has a hyphenated name
                         return true;
                     }
                 }
                 else if (type.flags & TypeFlags.UnionOrIntersection) {
                     for (const t of (<UnionOrIntersectionType>type).types) {
-                        if (isKnownProperty(t, name, isComparingJsxAttributes, containsSynthesizedJsxChildren)) {
+                        if (isKnownProperty(t, name, isComparingJsxAttributes)) {
                             return true;
                         }
                     }
@@ -8680,15 +8678,14 @@ namespace ts {
             function hasExcessProperties(source: FreshObjectLiteralType, target: Type, reportErrors: boolean): boolean {
                 if (maybeTypeOfKind(target, TypeFlags.Object) && !(getObjectFlags(target) & ObjectFlags.ObjectLiteralPatternWithComputedProperties)) {
                     const isComparingJsxAttributes = !!(source.flags & TypeFlags.JsxAttributes);
-                    const containsSynthesizedJsxChildren = !!(source.flags & TypeFlags.ContainsSynthesizedJsxChildren);
                     for (const prop of getPropertiesOfObjectType(source)) {
-                        if (!isKnownProperty(target, prop.name, isComparingJsxAttributes, containsSynthesizedJsxChildren)) {
+                        if (!isKnownProperty(target, prop.name, isComparingJsxAttributes)) {
                             if (reportErrors) {
                                 // We know *exactly* where things went wrong when comparing the types.
                                 // Use this property as the error node as this will be more helpful in
                                 // reasoning about what went wrong.
                                 Debug.assert(!!errorNode);
-                                if (isJsxAttributes(errorNode)) {
+                                if (isJsxAttributes(errorNode) || isJsxOpeningLikeElement(errorNode)) {
                                     // JsxAttributes has an object-literal flag and undergo same type-assignablity check as normal object-literal.
                                     // However, using an object-literal error message will be very confusing to the users so we give different a message.
                                     reportError(Diagnostics.Property_0_does_not_exist_on_type_1, symbolToString(prop), typeToString(target));
@@ -13303,7 +13300,6 @@ namespace ts {
             // Handle children attribute
             const parent = openingLikeElement.parent.kind === SyntaxKind.JsxElement ?
                 openingLikeElement.parent as JsxElement : undefined;
-            let containsSynthesizedJsxChildren = false;
             // We have to check that openingElement of the parent is the one we are visiting as this may not be true for selfClosingElement
             if (parent && parent.openingElement === openingLikeElement && parent.children.length > 0) {
                 // Error if there is a attribute named "children" and children element.
@@ -13344,8 +13340,7 @@ namespace ts {
             function createJsxAttributesType(symbol: Symbol, attributesTable: Map<Symbol>) {
                 const result = createAnonymousType(symbol, attributesTable, emptyArray, emptyArray, /*stringIndexInfo*/ undefined, /*numberIndexInfo*/ undefined);
                 const freshObjectLiteralFlag = compilerOptions.suppressExcessPropertyErrors ? 0 : TypeFlags.FreshLiteral;
-                const containsSynthesizedJsxChildrenFlag = containsSynthesizedJsxChildren ? TypeFlags.ContainsSynthesizedJsxChildren : 0;
-                result.flags |= TypeFlags.JsxAttributes | TypeFlags.ContainsObjectLiteral | freshObjectLiteralFlag | containsSynthesizedJsxChildrenFlag;
+                result.flags |= TypeFlags.JsxAttributes | TypeFlags.ContainsObjectLiteral | freshObjectLiteralFlag;
                 result.objectFlags |= ObjectFlags.ObjectLiteral;
                 return result;
             }
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index 735deb25f1a06..2100335d37c44 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -2977,8 +2977,6 @@ namespace ts {
         NonPrimitive            = 1 << 24,  // intrinsic object type
         /* @internal */
         JsxAttributes           = 1 << 25,  // Jsx attributes type
-        /* @internal */
-        ContainsSynthesizedJsxChildren = 1 << 26,  // Jsx attributes type contains synthesized children property from Jsx element's children
 
         /* @internal */
         Nullable = Undefined | Null,

From c778a487030006b503c078ab9f1d2b085ecd5796 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Fri, 14 Apr 2017 15:23:16 -0700
Subject: [PATCH 13/22] Read "children" property from react DTS file

---
 src/compiler/checker.ts | 138 +++++++++++++++++++++++++++-------------
 1 file changed, 93 insertions(+), 45 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index a6a3e34645b41..712b77ab3355b 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -411,6 +411,9 @@ namespace ts {
 
         let _jsxNamespace: string;
         let _jsxFactoryEntity: EntityName;
+        let _jsxElementAttribPropInterfaceSymbol: Symbol;  // JSX.ElementAttributesProperty [symbol] 
+        let _jsxElementPropertiesName: string;
+        let _jsxElementChildrenPropertyName: string;
 
         /** Things we lazy load from the JSX namespace */
         const jsxTypes = createMap<Type>();
@@ -424,8 +427,6 @@ namespace ts {
             IntrinsicClassAttributes: "IntrinsicClassAttributes"
         };
 
-        const jsxChildrenPropertyName = "children";
-
         const subtypeRelation = createMap<RelationComparisonResult>();
         const assignableRelation = createMap<RelationComparisonResult>();
         const comparableRelation = createMap<RelationComparisonResult>();
@@ -458,7 +459,7 @@ namespace ts {
         return checker;
 
         function getJsxNamespace(): string {
-            if (_jsxNamespace === undefined) {
+            if (!_jsxNamespace) {
                 _jsxNamespace = "React";
                 if (compilerOptions.jsxFactory) {
                     _jsxFactoryEntity = parseIsolatedEntityName(compilerOptions.jsxFactory, languageVersion);
@@ -12652,8 +12653,9 @@ namespace ts {
                 return getTypeOfPropertyOfType(attributesType, (node.parent as JsxAttribute).name.text);
             }
             else if (node.parent.kind === SyntaxKind.JsxElement) {
-                // JSX expression is in children of JSX Element, we will look for an atttribute named "chidlren"
-                return getTypeOfPropertyOfType(attributesType, jsxChildrenPropertyName);
+                // JSX expression is in children of JSX Element, we will look for an "children" atttribute (we get the name from JSX.ElementAttributesProperty)
+                const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
+                return jsxChildrenPropertyName ? getTypeOfPropertyOfType(attributesType, jsxChildrenPropertyName) : anyType;
             }
             else {
                 // JSX expression is in JSX spread attribute
@@ -13298,18 +13300,9 @@ namespace ts {
             }
 
             // Handle children attribute
-            const parent = openingLikeElement.parent.kind === SyntaxKind.JsxElement ?
-                openingLikeElement.parent as JsxElement : undefined;
+            const parent = openingLikeElement.parent.kind === SyntaxKind.JsxElement ? openingLikeElement.parent as JsxElement : undefined;
             // We have to check that openingElement of the parent is the one we are visiting as this may not be true for selfClosingElement
             if (parent && parent.openingElement === openingLikeElement && parent.children.length > 0) {
-                // Error if there is a attribute named "children" and children element.
-                // This is because children element will overwrite the value from attributes
-                if (attributesTable.has(jsxChildrenPropertyName)) {
-                    error(attributes, Diagnostics.props_children_are_specified_twice_The_attribute_named_children_will_be_overwritten);
-                }
-
-                // If there are children in the body of JSX element, create dummy attribute "children" with anyType so that it will pass the attribute checking process
-                const childrenPropSymbol = createSymbol(SymbolFlags.Property | SymbolFlags.Transient, jsxChildrenPropertyName);
                 const childrenTypes: Type[] = [];
                 for (const child of (parent as JsxElement).children) {
                     // In React, JSX text that contains only whitespaces will be ignored so we don't want to type-check that
@@ -13323,11 +13316,22 @@ namespace ts {
                         childrenTypes.push(checkExpression(child, checkMode));
                     }
                 }
-                childrenPropSymbol.type = childrenTypes.length === 1 ?
-                    childrenTypes[0] :
-                    createArrayType(getUnionType(childrenTypes,  /*subtypeReduction*/ false));
-                attributesTable.set(jsxChildrenPropertyName, childrenPropSymbol);
-                containsSynthesizedJsxChildren = true;
+
+                // Error if there is a attribute named "children" and children element.
+                // This is because children element will overwrite the value from attributes
+                const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
+                if (jsxChildrenPropertyName) {
+                    if (attributesTable.has(jsxChildrenPropertyName)) {
+                        error(attributes, Diagnostics.props_children_are_specified_twice_The_attribute_named_children_will_be_overwritten);
+                    }
+
+                    // If there are children in the body of JSX element, create dummy attribute "children" with anyType so that it will pass the attribute checking process
+                    const childrenPropSymbol = createSymbol(SymbolFlags.Property | SymbolFlags.Transient, jsxChildrenPropertyName);
+                    childrenPropSymbol.type = childrenTypes.length === 1 ?
+                        childrenTypes[0] :
+                        createArrayType(getUnionType(childrenTypes,  /*subtypeReduction*/ false));
+                    attributesTable.set(jsxChildrenPropertyName, childrenPropSymbol);
+                }
             }
 
             return createJsxAttributesType(attributes.symbol, attributesTable);
@@ -13429,41 +13433,85 @@ namespace ts {
             return getUnionType(map(signatures, getReturnTypeOfSignature), /*subtypeReduction*/ true);
         }
 
+        function getPropertiesFromJsxElementAttributesProperty() {
+            if (!_jsxElementAttribPropInterfaceSymbol) {
+                // JSX
+                const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/undefined);
+                // JSX.ElementAttributesProperty [symbol]
+                _jsxElementAttribPropInterfaceSymbol = jsxNamespace && getSymbol(jsxNamespace.exports, JsxNames.ElementAttributesPropertyNameContainer, SymbolFlags.Type);
+            }
+            return _jsxElementAttribPropInterfaceSymbol;
+        }
+
         /// e.g. "props" for React.d.ts,
         /// or 'undefined' if ElementAttributesProperty doesn't exist (which means all
         ///     non-intrinsic elements' attributes type is 'any'),
         /// or '' if it has 0 properties (which means every
         ///     non-intrinsic elements' attributes type is the element instance type)
         function getJsxElementPropertiesName() {
-            // JSX
-            const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/undefined);
-            // JSX.ElementAttributesProperty [symbol]
-            const attribsPropTypeSym = jsxNamespace && getSymbol(jsxNamespace.exports, JsxNames.ElementAttributesPropertyNameContainer, SymbolFlags.Type);
-            // JSX.ElementAttributesProperty [type]
-            const attribPropType = attribsPropTypeSym && getDeclaredTypeOfSymbol(attribsPropTypeSym);
-            // The properties of JSX.ElementAttributesProperty
-            const attribProperties = attribPropType && getPropertiesOfType(attribPropType);
-
-            if (attribProperties) {
-                // Element Attributes has zero properties, so the element attributes type will be the class instance type
-                if (attribProperties.length === 0) {
-                    return "";
-                }
-                // Element Attributes has one property, so the element attributes type will be the type of the corresponding
-                // property of the class instance type
-                else if (attribProperties.length === 1) {
-                    return attribProperties[0].name;
-                }
-                // More than one property on ElementAttributesProperty is an error
+            if (!_jsxElementPropertiesName) {
+                const jsxElementAttribPropInterfaceSym = getPropertiesFromJsxElementAttributesProperty();
+                // JSX.ElementAttributesProperty [type]
+                const jsxElementAttribPropInterfaceType = jsxElementAttribPropInterfaceSym && getDeclaredTypeOfSymbol(jsxElementAttribPropInterfaceSym);
+                // The properties of JSX.ElementAttributesProperty
+                const propertiesOfJsxElementAttribPropInterface = jsxElementAttribPropInterfaceType && getPropertiesOfType(jsxElementAttribPropInterfaceType);
+
+                // if there is a property in JSX.ElementAttributesProperty
+                // i.e.
+                // interface ElementAttributesProperty {
+                //     props: {
+                //         children?: any;
+                //     };
+                // }
+                if (propertiesOfJsxElementAttribPropInterface) {
+                    // Element Attributes has zero properties, so the element attributes type will be the class instance type
+                    if (propertiesOfJsxElementAttribPropInterface.length === 0) {
+                        _jsxElementPropertiesName = "";
+                    }
+                    // Element Attributes has one property, so the element attributes type will be the type of the corresponding
+                    // property of the class instance type
+                    else if (propertiesOfJsxElementAttribPropInterface.length === 1) {
+                        _jsxElementPropertiesName = propertiesOfJsxElementAttribPropInterface[0].name;
+                    }
+                    // More than one property on ElementAttributesProperty is an error
+                    else {
+                        error(jsxElementAttribPropInterfaceSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, JsxNames.ElementAttributesPropertyNameContainer);
+                        _jsxElementPropertiesName = undefined;
+                    }
+                }
                 else {
-                    error(attribsPropTypeSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, JsxNames.ElementAttributesPropertyNameContainer);
-                    return undefined;
+                    // No interface exists, so the element attributes type will be an implicit any
+                    _jsxElementPropertiesName = undefined;
                 }
             }
-            else {
-                // No interface exists, so the element attributes type will be an implicit any
-                return undefined;
+
+            return _jsxElementPropertiesName;
+        }
+
+        function getJsxElementChildrenPropertyname(): string {
+            if (!_jsxElementChildrenPropertyName) {
+                const jsxElementAttribPropInterfaceSym = getPropertiesFromJsxElementAttributesProperty();
+                // JSX.ElementAttributesProperty [type]
+                const jsxElementAttribPropInterfaceType = jsxElementAttribPropInterfaceSym && getDeclaredTypeOfSymbol(jsxElementAttribPropInterfaceSym);
+                // The properties of JSX.ElementAttributesProperty
+                const propertiesOfJsxElementAttribPropInterface = jsxElementAttribPropInterfaceType && getPropertiesOfType(jsxElementAttribPropInterfaceType);
+                // if there is a property in JSX.ElementAttributesProperty
+                // i.e.
+                // interface ElementAttributesProperty {
+                //     props: {
+                //         children?: any;
+                //     };
+                // }
+                if (propertiesOfJsxElementAttribPropInterface && propertiesOfJsxElementAttribPropInterface.length === 1) {
+                    const propsType = getTypeOfSymbol(propertiesOfJsxElementAttribPropInterface[0]);
+                    const propertiesOfProps = propsType && getPropertiesOfType(propsType);
+                    if (propertiesOfProps && propertiesOfProps.length === 1) {
+                        _jsxElementChildrenPropertyName = propertiesOfProps[0].name; 
+                    }
+                }
             }
+
+            return _jsxElementChildrenPropertyName;
         }
 
         /**

From dbf2a96a7e18211fb99edc81ea1f50f1f966faf7 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Fri, 14 Apr 2017 15:23:48 -0700
Subject: [PATCH 14/22] Update tests and baselines

---
 .../reference/checkJsxChildrenProperty8.js    |  3 +-
 .../reference/checkJsxChildrenProperty9.js    | 16 +++++++
 .../checkJsxChildrenProperty9.symbols         | 30 +++++++++++++
 .../reference/checkJsxChildrenProperty9.types | 42 +++++++++++++++++++
 ...elessFunctionComponentOverload4.errors.txt |  8 +---
 ...elessFunctionComponentOverload5.errors.txt | 12 ++----
 .../jsx/checkJsxChildrenProperty8.tsx         |  2 +-
 .../jsx/checkJsxChildrenProperty9.tsx         | 11 +++++
 tests/lib/react.d.ts                          |  6 ++-
 9 files changed, 112 insertions(+), 18 deletions(-)
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty9.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty9.symbols
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty9.types
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx

diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.js b/tests/baselines/reference/checkJsxChildrenProperty8.js
index 50ab16c020476..a2cd6a43fa500 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty8.js
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.js
@@ -27,8 +27,7 @@ let k2 = <Comp a={10} b="hi"><Button />
     <AnotherButton />  </Comp>;
 let k3 = <Comp a={10} b="hi">    <Button />
     <AnotherButton /></Comp>;
-let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
-
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
 
 //// [file.jsx]
 "use strict";
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.js b/tests/baselines/reference/checkJsxChildrenProperty9.js
new file mode 100644
index 0000000000000..017fb3ac41fa6
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.js
@@ -0,0 +1,16 @@
+//// [file.tsx]
+import React = require('react');
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+// OK
+var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
+var k3 = <div> {1} {"That is a number"} </div>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.symbols b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
new file mode 100644
index 0000000000000..38f680a7aeba8
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
@@ -0,0 +1,30 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : Symbol(k1, Decl(file.tsx, 3, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : Symbol(k2, Decl(file.tsx, 4, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>user : Symbol(user, Decl(file.tsx, 4, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>user : Symbol(user, Decl(file.tsx, 4, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : Symbol(k3, Decl(file.tsx, 5, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.types b/tests/baselines/reference/checkJsxChildrenProperty9.types
new file mode 100644
index 0000000000000..cf76f05143023
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.types
@@ -0,0 +1,42 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : JSX.Element
+><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+><h1> world </h1> : JSX.Element
+>h1 : any
+>h1 : any
+>div : any
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : JSX.Element
+><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
+>user : any
+><h2>{user.name}</h2> : JSX.Element
+>h2 : any
+>user.name : any
+>user : any
+>name : any
+>h2 : any
+>div : any
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : JSX.Element
+><div> {1} {"That is a number"} </div> : JSX.Element
+>div : any
+>1 : 1
+>"That is a number" : "That is a number"
+>div : any
+
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
index 8b95f86efd759..b59b1dd44f478 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
@@ -33,9 +33,7 @@ tests/cases/conformance/jsx/file.tsx(34,29): error TS2322: Type '{ y1: "hello";
 tests/cases/conformance/jsx/file.tsx(35,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: "hi"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
   Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
 tests/cases/conformance/jsx/file.tsx(36,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
-  Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
-    Types of property 'y1' are incompatible.
-      Type '"hello"' is not assignable to type 'boolean'.
+  Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
 
 
 ==== tests/cases/conformance/jsx/file.tsx (12 errors) ====
@@ -122,7 +120,5 @@ tests/cases/conformance/jsx/file.tsx(36,29): error TS2322: Type '{ y1: "hello";
     const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
                                 ~~~~~~~~~~~~~~~~~~~~
 !!! error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
-!!! error TS2322:   Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
-!!! error TS2322:     Types of property 'y1' are incompatible.
-!!! error TS2322:       Type '"hello"' is not assignable to type 'boolean'.
+!!! error TS2322:   Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
     
\ No newline at end of file
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt b/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
index c36a04dbe315c..a7b787c1c1830 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
@@ -1,9 +1,7 @@
 tests/cases/conformance/jsx/file.tsx(48,24): error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-  Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'HyphenProps'.
-    Property '"data-format"' is missing in type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }'.
+  Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
 tests/cases/conformance/jsx/file.tsx(49,24): error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-  Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'HyphenProps'.
-    Property '"data-format"' is missing in type '{ to: string; onClick: (e: any) => void; children: string; }'.
+  Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
 tests/cases/conformance/jsx/file.tsx(50,24): error TS2322: Type '{ onClick: () => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
   Property 'onClick' does not exist on type 'IntrinsicAttributes & HyphenProps'.
 tests/cases/conformance/jsx/file.tsx(51,24): error TS2322: Type '{ onClick: (k: MouseEvent<any>) => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
@@ -71,13 +69,11 @@ tests/cases/conformance/jsx/file.tsx(56,24): error TS2322: Type '{ data-format:
     const b0 = <MainButton to='/some/path' onClick={(e)=>{}}>GO</MainButton>;  // extra property;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 !!! error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-!!! error TS2322:   Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'HyphenProps'.
-!!! error TS2322:     Property '"data-format"' is missing in type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }'.
+!!! error TS2322:   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
     const b1 = <MainButton onClick={(e: any)=> {}} {...obj0}>Hello world</MainButton>;  // extra property;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 !!! error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
-!!! error TS2322:   Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'HyphenProps'.
-!!! error TS2322:     Property '"data-format"' is missing in type '{ to: string; onClick: (e: any) => void; children: string; }'.
+!!! error TS2322:   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
     const b2 = <MainButton {...{to: "10000"}} {...obj2} />;  // extra property
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 !!! error TS2322: Type '{ onClick: () => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
index eaba752b6a4cb..44e9f7e065248 100644
--- a/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
@@ -31,4 +31,4 @@ let k2 = <Comp a={10} b="hi"><Button />
     <AnotherButton />  </Comp>;
 let k3 = <Comp a={10} b="hi">    <Button />
     <AnotherButton /></Comp>;
-let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx
new file mode 100644
index 0000000000000..5453262b7d474
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx
@@ -0,0 +1,11 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
\ No newline at end of file
diff --git a/tests/lib/react.d.ts b/tests/lib/react.d.ts
index b2b0783cf1533..cb34c8ab38f9b 100644
--- a/tests/lib/react.d.ts
+++ b/tests/lib/react.d.ts
@@ -2359,7 +2359,11 @@ declare namespace JSX {
     interface ElementClass extends React.Component<any, any> {
         render(): JSX.Element | null;
     }
-    interface ElementAttributesProperty { props: {}; }
+    interface ElementAttributesProperty {
+        props: {
+            children: any;
+        };
+    }
 
     interface IntrinsicAttributes extends React.Attributes { }
 

From 9a23b75f0593deec760cb3c012fccdc7da484d55 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Mon, 17 Apr 2017 13:00:38 -0700
Subject: [PATCH 15/22] Update baselines and tests (2)

---
 .../checkJsxChildrenProperty1.symbols         |  8 +-
 .../reference/checkJsxChildrenProperty10.js   | 38 ++++++++
 .../checkJsxChildrenProperty10.symbols        | 73 +++++++++++++++
 .../checkJsxChildrenProperty10.types          | 89 +++++++++++++++++++
 .../reference/checkJsxChildrenProperty11.js   | 38 ++++++++
 .../checkJsxChildrenProperty11.symbols        | 73 +++++++++++++++
 .../checkJsxChildrenProperty11.types          | 89 +++++++++++++++++++
 .../checkJsxChildrenProperty3.symbols         |  8 +-
 .../checkJsxChildrenProperty6.symbols         | 12 +--
 .../checkJsxChildrenProperty8.symbols         | 12 +--
 .../checkJsxChildrenProperty9.symbols         | 28 +++---
 .../tsxDefaultAttributesResolution1.symbols   |  4 +-
 .../tsxDefaultAttributesResolution2.symbols   |  4 +-
 .../tsxSpreadAttributesResolution1.symbols    |  4 +-
 .../tsxSpreadAttributesResolution11.symbols   |  4 +-
 .../tsxSpreadAttributesResolution3.symbols    |  4 +-
 .../tsxSpreadAttributesResolution4.symbols    |  8 +-
 .../tsxSpreadAttributesResolution7.symbols    |  4 +-
 .../tsxSpreadAttributesResolution8.symbols    |  4 +-
 .../tsxSpreadAttributesResolution9.symbols    |  4 +-
 .../tsxStatelessFunctionComponents3.symbols   | 14 +--
 .../reference/tsxUnionElementType1.symbols    |  8 +-
 .../reference/tsxUnionElementType5.symbols    | 12 +--
 .../reference/tsxUnionTypeComponent1.symbols  |  4 +-
 .../jsx/checkJsxChildrenProperty10.tsx        | 24 +++++
 .../jsx/checkJsxChildrenProperty11.tsx        | 25 ++++++
 ...InFunctionExpressionOfChildrenCallback.ts} |  3 +-
 ...InFunctionExpressionOfChildrenCallback1.ts | 32 +++++++
 28 files changed, 555 insertions(+), 75 deletions(-)
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty10.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty10.symbols
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty10.types
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty11.js
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty11.symbols
 create mode 100644 tests/baselines/reference/checkJsxChildrenProperty11.types
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx
 create mode 100644 tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx
 rename tests/cases/fourslash/{tscCompletionInFunctionExpressionOfChildrenCallback.ts => tsxCompletionInFunctionExpressionOfChildrenCallback.ts} (89%)
 create mode 100644 tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts

diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.symbols b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
index 39b189b7eb4ae..d80a3b1e82b5f 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty1.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
@@ -23,11 +23,11 @@ function Comp(p: Prop) {
 >Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
 
     return <div>{p.b}</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 >p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
 >p : Symbol(p, Decl(file.tsx, 8, 14))
 >b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 }
 
 // OK
@@ -59,8 +59,8 @@ let k2 =
 >b : Symbol(b, Decl(file.tsx, 19, 16))
 
         <div>hi hi hi!</div>
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
     </Comp>;
 >Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
diff --git a/tests/baselines/reference/checkJsxChildrenProperty10.js b/tests/baselines/reference/checkJsxChildrenProperty10.js
new file mode 100644
index 0000000000000..f022b28f20c28
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty10.js
@@ -0,0 +1,38 @@
+//// [file.tsx]
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
+
+//// [file.jsx]
+var Button = (function () {
+    function Button() {
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}());
+// OK
+var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
+var k3 = <div> {1} {"That is a number"} </div>;
+var k4 = <Button> <h2> Hello </h2> </Button>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty10.symbols b/tests/baselines/reference/checkJsxChildrenProperty10.symbols
new file mode 100644
index 0000000000000..bf054377fb16a
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty10.symbols
@@ -0,0 +1,73 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
+
+	interface Element { }
+>Element : Symbol(Element, Decl(file.tsx, 0, 20))
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(file.tsx, 1, 22))
+>props : Symbol(ElementAttributesProperty.props, Decl(file.tsx, 2, 38))
+
+	interface IntrinsicElements { 
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 2, 50))
+
+		div: any;
+>div : Symbol(IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+		h2: any;
+>h2 : Symbol(IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+
+		h1: any;
+>h1 : Symbol(IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+	}
+}
+
+class Button {
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
+	props: {}
+>props : Symbol(Button.props, Decl(file.tsx, 10, 14))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 11, 10))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : Symbol(k1, Decl(file.tsx, 18, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : Symbol(k2, Decl(file.tsx, 19, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : Symbol(k3, Decl(file.tsx, 20, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : Symbol(k4, Decl(file.tsx, 21, 3))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty10.types b/tests/baselines/reference/checkJsxChildrenProperty10.types
new file mode 100644
index 0000000000000..cee5995b8515e
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty10.types
@@ -0,0 +1,89 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : any
+
+	interface Element { }
+>Element : Element
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : ElementAttributesProperty
+>props : {}
+
+	interface IntrinsicElements { 
+>IntrinsicElements : IntrinsicElements
+
+		div: any;
+>div : any
+
+		h2: any;
+>h2 : any
+
+		h1: any;
+>h1 : any
+	}
+}
+
+class Button {
+>Button : Button
+
+	props: {}
+>props : {}
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : JSX.Element
+><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+><h1> world </h1> : JSX.Element
+>h1 : any
+>h1 : any
+>div : any
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : JSX.Element
+><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
+>user : any
+><h2>{user.name}</h2> : JSX.Element
+>h2 : any
+>user.name : any
+>user : any
+>name : any
+>h2 : any
+>div : any
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : JSX.Element
+><div> {1} {"That is a number"} </div> : JSX.Element
+>div : any
+>1 : 1
+>"That is a number" : "That is a number"
+>div : any
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : JSX.Element
+><Button> <h2> Hello </h2> </Button> : JSX.Element
+>Button : typeof Button
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>Button : typeof Button
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty11.js b/tests/baselines/reference/checkJsxChildrenProperty11.js
new file mode 100644
index 0000000000000..f022b28f20c28
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty11.js
@@ -0,0 +1,38 @@
+//// [file.tsx]
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
+
+//// [file.jsx]
+var Button = (function () {
+    function Button() {
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}());
+// OK
+var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
+var k3 = <div> {1} {"That is a number"} </div>;
+var k4 = <Button> <h2> Hello </h2> </Button>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty11.symbols b/tests/baselines/reference/checkJsxChildrenProperty11.symbols
new file mode 100644
index 0000000000000..bf054377fb16a
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty11.symbols
@@ -0,0 +1,73 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
+
+	interface Element { }
+>Element : Symbol(Element, Decl(file.tsx, 0, 20))
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(file.tsx, 1, 22))
+>props : Symbol(ElementAttributesProperty.props, Decl(file.tsx, 2, 38))
+
+	interface IntrinsicElements { 
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 2, 50))
+
+		div: any;
+>div : Symbol(IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+		h2: any;
+>h2 : Symbol(IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+
+		h1: any;
+>h1 : Symbol(IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+	}
+}
+
+class Button {
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
+	props: {}
+>props : Symbol(Button.props, Decl(file.tsx, 10, 14))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 11, 10))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : Symbol(k1, Decl(file.tsx, 18, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : Symbol(k2, Decl(file.tsx, 19, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : Symbol(k3, Decl(file.tsx, 20, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : Symbol(k4, Decl(file.tsx, 21, 3))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty11.types b/tests/baselines/reference/checkJsxChildrenProperty11.types
new file mode 100644
index 0000000000000..cee5995b8515e
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty11.types
@@ -0,0 +1,89 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : any
+
+	interface Element { }
+>Element : Element
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : ElementAttributesProperty
+>props : {}
+
+	interface IntrinsicElements { 
+>IntrinsicElements : IntrinsicElements
+
+		div: any;
+>div : any
+
+		h2: any;
+>h2 : any
+
+		h1: any;
+>h1 : any
+	}
+}
+
+class Button {
+>Button : Button
+
+	props: {}
+>props : {}
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : JSX.Element
+><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+><h1> world </h1> : JSX.Element
+>h1 : any
+>h1 : any
+>div : any
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : JSX.Element
+><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
+>user : any
+><h2>{user.name}</h2> : JSX.Element
+>h2 : any
+>user.name : any
+>user : any
+>name : any
+>h2 : any
+>div : any
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : JSX.Element
+><div> {1} {"That is a number"} </div> : JSX.Element
+>div : any
+>1 : 1
+>"That is a number" : "That is a number"
+>div : any
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : JSX.Element
+><Button> <h2> Hello </h2> </Button> : JSX.Element
+>Button : typeof Button
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>Button : typeof Button
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.symbols b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
index 2a1aca621e951..e2e8492156fb1 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty3.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
@@ -61,11 +61,11 @@ function UserName0() {
 >user : Symbol(user, Decl(file.tsx, 22, 13))
 
                 <h1>{ user.Name }</h1>
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 >user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
 >user : Symbol(user, Decl(file.tsx, 22, 13))
 >Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 
             ) }
         </FetchUser>
@@ -85,11 +85,11 @@ function UserName1() {
 >user : Symbol(user, Decl(file.tsx, 33, 13))
 
                 <h1>{ user.Name }</h1>
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 >user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
 >user : Symbol(user, Decl(file.tsx, 33, 13))
 >Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 
             ) }
         </FetchUser>
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.symbols b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
index df48a53e37d05..7935b8cb2fe76 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty6.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
@@ -29,8 +29,8 @@ class Button extends React.Component<any, any> {
 >render : Symbol(Button.render, Decl(file.tsx, 8, 48))
 
         return (<div>My Button</div>)
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
@@ -39,8 +39,8 @@ function AnotherButton(p: any) {
 >p : Symbol(p, Decl(file.tsx, 14, 23))
 
     return <h1>Just Another Button</h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 }
 
 function Comp(p: Prop) {
@@ -49,11 +49,11 @@ function Comp(p: Prop) {
 >Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
 
     return <div>{p.b}</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 >p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
 >p : Symbol(p, Decl(file.tsx, 18, 14))
 >b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 }
 
 // Ok
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.symbols b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
index 92c2e685e71c4..211009642bb53 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty8.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
@@ -29,8 +29,8 @@ class Button extends React.Component<any, any> {
 >render : Symbol(Button.render, Decl(file.tsx, 8, 48))
 
         return (<div>My Button</div>)
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
@@ -39,8 +39,8 @@ function AnotherButton(p: any) {
 >p : Symbol(p, Decl(file.tsx, 14, 23))
 
     return <h1>Just Another Button</h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 }
 
 function Comp(p: Prop) {
@@ -49,11 +49,11 @@ function Comp(p: Prop) {
 >Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
 
     return <div>{p.b}</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 >p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
 >p : Symbol(p, Decl(file.tsx, 18, 14))
 >b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 }
 
 // OK
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.symbols b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
index 38f680a7aeba8..d37d8a1bfe656 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty9.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
@@ -5,26 +5,26 @@ import React = require('react');
 // OK
 let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
 >k1 : Symbol(k1, Decl(file.tsx, 3, 3))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
 let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
 >k2 : Symbol(k2, Decl(file.tsx, 4, 3))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
 >user : Symbol(user, Decl(file.tsx, 4, 34))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
 >user : Symbol(user, Decl(file.tsx, 4, 34))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2408, 48))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
 let k3 = <div> {1} {"That is a number"} </div>;
 >k3 : Symbol(k3, Decl(file.tsx, 5, 3))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
diff --git a/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols b/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
index 900aa7cf84225..fbe4d1bf5dc10 100644
--- a/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
+++ b/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
@@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols b/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
index 766505b551812..15d4a04901f32 100644
--- a/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
+++ b/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
@@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
index cc669b485e427..cb18cd27d624b 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
@@ -12,8 +12,8 @@ class Poisoned extends React.Component<{}, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 2, 48))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
index f8c0bc4cf1f91..230e7b25dc5ae 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
@@ -48,8 +48,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
 >render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
index ade152b687de4..c136d72444d0e 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
@@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
index c6b44bcd42859..6cb0486be61a1 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
@@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
@@ -56,8 +56,8 @@ class EmptyProp extends React.Component<{}, {}> {
 >render : Symbol(EmptyProp.render, Decl(file.tsx, 21, 49))
 
         return <div>Default hi</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
index d3f967ca2e7d5..fd95004c914a1 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
@@ -22,8 +22,8 @@ class TextComponent extends React.Component<TextProps, {}> {
 >render : Symbol(TextComponent.render, Decl(file.tsx, 5, 60))
 
         return <span>Some Text..</span>;
->span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2458, 51))
->span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2458, 51))
+>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2462, 51))
+>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2462, 51))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
index 6bfe0932173e6..1d0429a1cd154 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
@@ -45,8 +45,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
 >render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
index ba9a28bfc1e41..26bda335e4fcf 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
@@ -23,8 +23,8 @@ class Opt extends React.Component<OptionProp, {}> {
 >render : Symbol(Opt.render, Decl(file.tsx, 7, 51))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols b/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
index a75b5f30c81e8..842c8b7b5d93a 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
+++ b/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
@@ -5,7 +5,7 @@ import React = require('react');
 const Foo = (props: any) => <div/>;
 >Foo : Symbol(Foo, Decl(file.tsx, 2, 5))
 >props : Symbol(props, Decl(file.tsx, 2, 13))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
 // Should be OK
 const foo = <Foo />;
@@ -19,14 +19,14 @@ var MainMenu: React.StatelessComponent<{}> = (props) => (<div>
 >React : Symbol(React, Decl(file.tsx, 0, 0))
 >StatelessComponent : Symbol(React.StatelessComponent, Decl(react.d.ts, 197, 40))
 >props : Symbol(props, Decl(file.tsx, 8, 46))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
     <h3>Main Menu</h3>
->h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2409, 48))
->h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2409, 48))
+>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2413, 48))
+>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2413, 48))
 
 </div>);
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
 var App: React.StatelessComponent<{ children }> = ({children}) => (
 >App : Symbol(App, Decl(file.tsx, 12, 3))
@@ -36,12 +36,12 @@ var App: React.StatelessComponent<{ children }> = ({children}) => (
 >children : Symbol(children, Decl(file.tsx, 12, 52))
 
     <div >
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
         <MainMenu/>
 >MainMenu : Symbol(MainMenu, Decl(file.tsx, 8, 3))
 
 	</div>
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
 );
diff --git a/tests/baselines/reference/tsxUnionElementType1.symbols b/tests/baselines/reference/tsxUnionElementType1.symbols
index da0639ac5f15f..72b9d96dbe6aa 100644
--- a/tests/baselines/reference/tsxUnionElementType1.symbols
+++ b/tests/baselines/reference/tsxUnionElementType1.symbols
@@ -8,8 +8,8 @@ function SFC1(prop: { x: number }) {
 >x : Symbol(x, Decl(file.tsx, 2, 21))
 
     return <div>hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 
 };
 
@@ -19,8 +19,8 @@ function SFC2(prop: { x: boolean }) {
 >x : Symbol(x, Decl(file.tsx, 6, 21))
 
     return <h1>World </h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 }
 
 var SFCComp = SFC1 || SFC2;
diff --git a/tests/baselines/reference/tsxUnionElementType5.symbols b/tests/baselines/reference/tsxUnionElementType5.symbols
index e05f3deb9cca6..394e530231d6a 100644
--- a/tests/baselines/reference/tsxUnionElementType5.symbols
+++ b/tests/baselines/reference/tsxUnionElementType5.symbols
@@ -6,16 +6,16 @@ function EmptySFC1() {
 >EmptySFC1 : Symbol(EmptySFC1, Decl(file.tsx, 0, 32))
 
     return <div>hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 }
 
 function EmptySFC2() {
 >EmptySFC2 : Symbol(EmptySFC2, Decl(file.tsx, 4, 1))
 
     return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
 }
 
 function SFC2(prop: { x: boolean }) {
@@ -24,8 +24,8 @@ function SFC2(prop: { x: boolean }) {
 >x : Symbol(x, Decl(file.tsx, 10, 21))
 
     return <h1>World</h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
 }
 
 var EmptySFCComp = EmptySFC1 || EmptySFC2;
diff --git a/tests/baselines/reference/tsxUnionTypeComponent1.symbols b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
index ec57cfaa2de55..81ebe5ec01529 100644
--- a/tests/baselines/reference/tsxUnionTypeComponent1.symbols
+++ b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
@@ -38,8 +38,8 @@ class MyComponent extends React.Component<ComponentProps, {}> {
 <MyComponent AnyComponent={() => <button>test</button>}/>
 >MyComponent : Symbol(MyComponent, Decl(file.tsx, 4, 1))
 >AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 14, 12))
->button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2383, 43))
->button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2383, 43))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2387, 43))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2387, 43))
 
 // Component Class as Props
 class MyButtonComponent extends React.Component<{},{}> {
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx
new file mode 100644
index 0000000000000..f13f44567ffb4
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx
@@ -0,0 +1,24 @@
+//@filename: file.tsx
+//@jsx: preserve
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx
new file mode 100644
index 0000000000000..a6fab6f506e66
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx
@@ -0,0 +1,25 @@
+//@filename: file.tsx
+//@jsx: preserve
+//@noImplicitAny: true
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
\ No newline at end of file
diff --git a/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback.ts
similarity index 89%
rename from tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts
rename to tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback.ts
index 0a926e64ac0ed..911fa41470dc8 100644
--- a/tests/cases/fourslash/tscCompletionInFunctionExpressionOfChildrenCallback.ts
+++ b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback.ts
@@ -27,5 +27,4 @@
 //// }
 
 goTo.marker();
-debugger;
-verify.completionListContains('Name');
\ No newline at end of file
+verify.completionListIsEmpty();
\ No newline at end of file
diff --git a/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts
new file mode 100644
index 0000000000000..491188115ebbb
--- /dev/null
+++ b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts
@@ -0,0 +1,32 @@
+/// <reference path='fourslash.ts' />
+//@module: commonjs
+//@jsx: preserve
+
+// @Filename: 1.tsx
+//// declare module JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////     }
+////     interface ElementAttributesProperty {
+////        props: { children; }
+////     }
+//// }
+//// interface IUser {
+////     Name: string;
+//// }
+//// interface IFetchUserProps {
+////     children: (user: IUser) => any;
+//// }
+//// function FetchUser(props: IFetchUserProps) { return undefined; }
+//// function UserName() {
+////     return (
+////         <FetchUser>
+////             { user => (
+////                 <h1>{ user./**/ }</h1> 
+////             )}
+////         </FetchUser>
+////     );
+//// }
+
+goTo.marker();
+verify.completionListContains('Name');
\ No newline at end of file

From 7829cbae26ea1ccf6531c9958746f04b75595399 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Mon, 17 Apr 2017 13:00:45 -0700
Subject: [PATCH 16/22] Fix linting error

---
 src/compiler/checker.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 712b77ab3355b..c5b531337c93a 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -411,7 +411,7 @@ namespace ts {
 
         let _jsxNamespace: string;
         let _jsxFactoryEntity: EntityName;
-        let _jsxElementAttribPropInterfaceSymbol: Symbol;  // JSX.ElementAttributesProperty [symbol] 
+        let _jsxElementAttribPropInterfaceSymbol: Symbol;  // JSX.ElementAttributesProperty [symbol]
         let _jsxElementPropertiesName: string;
         let _jsxElementChildrenPropertyName: string;
 
@@ -13506,7 +13506,7 @@ namespace ts {
                     const propsType = getTypeOfSymbol(propertiesOfJsxElementAttribPropInterface[0]);
                     const propertiesOfProps = propsType && getPropertiesOfType(propsType);
                     if (propertiesOfProps && propertiesOfProps.length === 1) {
-                        _jsxElementChildrenPropertyName = propertiesOfProps[0].name; 
+                        _jsxElementChildrenPropertyName = propertiesOfProps[0].name;
                     }
                 }
             }

From d290cf7633d2d05300ff7332decff7de095b4eab Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Mon, 17 Apr 2017 13:11:16 -0700
Subject: [PATCH 17/22] Update error message to use variable name for
 "children"

---
 src/compiler/checker.ts                                   | 2 +-
 src/compiler/diagnosticMessages.json                      | 2 +-
 .../reference/checkJsxChildrenProperty2.errors.txt        | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index c5b531337c93a..95b3de8df40d8 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13322,7 +13322,7 @@ namespace ts {
                 const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
                 if (jsxChildrenPropertyName) {
                     if (attributesTable.has(jsxChildrenPropertyName)) {
-                        error(attributes, Diagnostics.props_children_are_specified_twice_The_attribute_named_children_will_be_overwritten);
+                        error(attributes, Diagnostics._0_are_specified_twice_The_attribute_named_0_will_be_overwritten, jsxChildrenPropertyName);
                     }
 
                     // If there are children in the body of JSX element, create dummy attribute "children" with anyType so that it will pass the attribute checking process
diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json
index 72554a9f0bacf..b7f30e2b209c8 100644
--- a/src/compiler/diagnosticMessages.json
+++ b/src/compiler/diagnosticMessages.json
@@ -2099,7 +2099,7 @@
         "category": "Error",
         "code": 2707
     },
-    "props.children are specified twice. The attribute named 'children' will be overwritten.": {
+    "'{0}' are specified twice. The attribute named '{0}' will be overwritten.": {
         "category": "Error",
         "code": 2708
     },
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
index ecde87c6fbf6e..d288d92e93bc9 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
@@ -1,8 +1,8 @@
 tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
-tests/cases/conformance/jsx/file.tsx(17,11): error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
-tests/cases/conformance/jsx/file.tsx(25,11): error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(17,11): error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(25,11): error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
 tests/cases/conformance/jsx/file.tsx(31,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
@@ -52,7 +52,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ a: 10; b: "hi
     let k0 =
         <Comp a={10} b="hi" children="Random" >
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
+!!! error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
             hi hi hi!
         </Comp>;
     
@@ -62,7 +62,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ a: 10; b: "hi
     let k1 =
         <Comp a={10} b="hi" {...o} >
               ~~~~~~~~~~~~~~~~~~~~
-!!! error TS2708: props.children are specified twice. The attribute named 'children' will be overwritten.
+!!! error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
             hi hi hi!
         </Comp>;
     

From c13383a3a36e0b485dda8a3b5949f18317aa7beb Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Mon, 17 Apr 2017 13:32:57 -0700
Subject: [PATCH 18/22] Fix baselines and linting error from merging with
 master

---
 src/compiler/checker.ts                                   | 6 +++---
 .../reference/checkJsxChildrenProperty2.errors.txt        | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index cb62dff01c13f..9f623abec5fd9 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -8696,10 +8696,10 @@ namespace ts {
             // type, a property is considered known if it is known in any constituent type.
             function isKnownProperty(type: Type, name: string, isComparingJsxAttributes: boolean): boolean {
                 if (type.flags & TypeFlags.Object) {
-                    const resolved = resolveStructuredTypeMembers(<ObjectType>type);
+                    const resolved = resolveStructuredTypeMembers(<ObjectType>type);
                     if (resolved.stringIndexInfo || resolved.numberIndexInfo && isNumericLiteralName(name) ||
                         getPropertyOfType(type, name) || isComparingJsxAttributes && !isUnhyphenatedJsxName(name)) {
-                        // For JSXAttributes, if the attribute has a hyphenated name, consider that the attribute to be known.
+                        // For JSXAttributes, if the attribute has a hyphenated name, consider that the attribute to be known.
                         return true;
                     }
                 }
@@ -13477,7 +13477,7 @@ namespace ts {
         function getPropertiesFromJsxElementAttributesProperty() {
             if (!_jsxElementAttribPropInterfaceSymbol) {
                 // JSX
-                const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/undefined);
+                const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
                 // JSX.ElementAttributesProperty [symbol]
                 _jsxElementAttribPropInterfaceSymbol = jsxNamespace && getSymbol(jsxNamespace.exports, JsxNames.ElementAttributesPropertyNameContainer, SymbolFlags.Type);
             }
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
index d288d92e93bc9..6bb91bd638501 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
@@ -1,8 +1,8 @@
 tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
-tests/cases/conformance/jsx/file.tsx(17,11): error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
-tests/cases/conformance/jsx/file.tsx(25,11): error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(17,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(25,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
 tests/cases/conformance/jsx/file.tsx(31,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
@@ -52,7 +52,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ a: 10; b: "hi
     let k0 =
         <Comp a={10} b="hi" children="Random" >
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
+!!! error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
             hi hi hi!
         </Comp>;
     
@@ -62,7 +62,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ a: 10; b: "hi
     let k1 =
         <Comp a={10} b="hi" {...o} >
               ~~~~~~~~~~~~~~~~~~~~
-!!! error TS2708: 'children' are specified twice. The attribute named 'children' will be overwritten.
+!!! error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
             hi hi hi!
         </Comp>;
     

From e9cd3ade8600527b7ed9f1b13a514e5b61048580 Mon Sep 17 00:00:00 2001
From: Yui T <yuisu@microsoft.com>
Date: Wed, 19 Apr 2017 22:33:33 -0700
Subject: [PATCH 19/22] Change how we look up children attribute from
 react.d.ts

---
 src/compiler/checker.ts | 103 +++++++++++++++-------------------------
 tests/lib/react.d.ts    |   8 ++--
 2 files changed, 42 insertions(+), 69 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 9f623abec5fd9..0524c24a70047 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -423,17 +423,20 @@ namespace ts {
 
         let _jsxNamespace: string;
         let _jsxFactoryEntity: EntityName;
-        let _jsxElementAttribPropInterfaceSymbol: Symbol;  // JSX.ElementAttributesProperty [symbol]
         let _jsxElementPropertiesName: string;
+        let _hasComputedJsxElementPropertiesName = false;
         let _jsxElementChildrenPropertyName: string;
+        let _hasComputedJsxElementChildrenPropertyName = false;
 
         /** Things we lazy load from the JSX namespace */
         const jsxTypes = createMap<Type>();
+
         const JsxNames = {
             JSX: "JSX",
             IntrinsicElements: "IntrinsicElements",
             ElementClass: "ElementClass",
             ElementAttributesPropertyNameContainer: "ElementAttributesProperty",
+            ElementChildrenAttributeNameContainer: "ElementChildrenAttribute",
             Element: "Element",
             IntrinsicAttributes: "IntrinsicAttributes",
             IntrinsicClassAttributes: "IntrinsicClassAttributes"
@@ -12696,7 +12699,7 @@ namespace ts {
             else if (node.parent.kind === SyntaxKind.JsxElement) {
                 // JSX expression is in children of JSX Element, we will look for an "children" atttribute (we get the name from JSX.ElementAttributesProperty)
                 const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
-                return jsxChildrenPropertyName ? getTypeOfPropertyOfType(attributesType, jsxChildrenPropertyName) : anyType;
+                return jsxChildrenPropertyName && jsxChildrenPropertyName !== "" ? getTypeOfPropertyOfType(attributesType, jsxChildrenPropertyName) : anyType;
             }
             else {
                 // JSX expression is in JSX spread attribute
@@ -13361,7 +13364,7 @@ namespace ts {
                 // Error if there is a attribute named "children" and children element.
                 // This is because children element will overwrite the value from attributes
                 const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
-                if (jsxChildrenPropertyName) {
+                if (jsxChildrenPropertyName && jsxChildrenPropertyName !== "") {
                     if (attributesTable.has(jsxChildrenPropertyName)) {
                         error(attributes, Diagnostics._0_are_specified_twice_The_attribute_named_0_will_be_overwritten, jsxChildrenPropertyName);
                     }
@@ -13474,14 +13477,34 @@ namespace ts {
             return getUnionType(map(signatures, getReturnTypeOfSignature), /*subtypeReduction*/ true);
         }
 
-        function getPropertiesFromJsxElementAttributesProperty() {
-            if (!_jsxElementAttribPropInterfaceSymbol) {
-                // JSX
-                const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
-                // JSX.ElementAttributesProperty [symbol]
-                _jsxElementAttribPropInterfaceSymbol = jsxNamespace && getSymbol(jsxNamespace.exports, JsxNames.ElementAttributesPropertyNameContainer, SymbolFlags.Type);
+        /** 
+         * 
+        */
+        function getNameFromJsxElementAttributesContainer(nameOfAttribPropContainer: string): string {
+            // JSX
+            const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
+            // JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [symbol]
+            const jsxElementAttribPropInterfaceSym = jsxNamespace && getSymbol(jsxNamespace.exports, nameOfAttribPropContainer, SymbolFlags.Type);
+            // JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [type]
+            const jsxElementAttribPropInterfaceType = jsxElementAttribPropInterfaceSym && getDeclaredTypeOfSymbol(jsxElementAttribPropInterfaceSym);
+            // The properties of JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute
+            const propertiesOfJsxElementAttribPropInterface = jsxElementAttribPropInterfaceType && getPropertiesOfType(jsxElementAttribPropInterfaceType);
+            if (propertiesOfJsxElementAttribPropInterface) {
+                // Element Attributes has zero properties, so the element attributes type will be the class instance type
+                if (propertiesOfJsxElementAttribPropInterface.length === 0) {
+                    return "";
+                }
+                // Element Attributes has one property, so the element attributes type will be the type of the corresponding
+                // property of the class instance type
+                else if (propertiesOfJsxElementAttribPropInterface.length === 1) {
+                    return propertiesOfJsxElementAttribPropInterface[0].name;
+                }
+                else if (propertiesOfJsxElementAttribPropInterface.length > 1) {
+                    // More than one property on ElementAttributesProperty is an error
+                    error(jsxElementAttribPropInterfaceSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, nameOfAttribPropContainer);
+                }
             }
-            return _jsxElementAttribPropInterfaceSymbol;
+            return undefined;
         }
 
         /// e.g. "props" for React.d.ts,
@@ -13490,66 +13513,18 @@ namespace ts {
         /// or '' if it has 0 properties (which means every
         ///     non-intrinsic elements' attributes type is the element instance type)
         function getJsxElementPropertiesName() {
-            if (!_jsxElementPropertiesName) {
-                const jsxElementAttribPropInterfaceSym = getPropertiesFromJsxElementAttributesProperty();
-                // JSX.ElementAttributesProperty [type]
-                const jsxElementAttribPropInterfaceType = jsxElementAttribPropInterfaceSym && getDeclaredTypeOfSymbol(jsxElementAttribPropInterfaceSym);
-                // The properties of JSX.ElementAttributesProperty
-                const propertiesOfJsxElementAttribPropInterface = jsxElementAttribPropInterfaceType && getPropertiesOfType(jsxElementAttribPropInterfaceType);
-
-                // if there is a property in JSX.ElementAttributesProperty
-                // i.e.
-                // interface ElementAttributesProperty {
-                //     props: {
-                //         children?: any;
-                //     };
-                // }
-                if (propertiesOfJsxElementAttribPropInterface) {
-                    // Element Attributes has zero properties, so the element attributes type will be the class instance type
-                    if (propertiesOfJsxElementAttribPropInterface.length === 0) {
-                        _jsxElementPropertiesName = "";
-                    }
-                    // Element Attributes has one property, so the element attributes type will be the type of the corresponding
-                    // property of the class instance type
-                    else if (propertiesOfJsxElementAttribPropInterface.length === 1) {
-                        _jsxElementPropertiesName = propertiesOfJsxElementAttribPropInterface[0].name;
-                    }
-                    // More than one property on ElementAttributesProperty is an error
-                    else {
-                        error(jsxElementAttribPropInterfaceSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, JsxNames.ElementAttributesPropertyNameContainer);
-                        _jsxElementPropertiesName = undefined;
-                    }
-                }
-                else {
-                    // No interface exists, so the element attributes type will be an implicit any
-                    _jsxElementPropertiesName = undefined;
-                }
+            if (!_hasComputedJsxElementPropertiesName) {
+                _hasComputedJsxElementPropertiesName = true;
+                _jsxElementPropertiesName = getNameFromJsxElementAttributesContainer(JsxNames.ElementAttributesPropertyNameContainer);
             }
 
             return _jsxElementPropertiesName;
         }
 
         function getJsxElementChildrenPropertyname(): string {
-            if (!_jsxElementChildrenPropertyName) {
-                const jsxElementAttribPropInterfaceSym = getPropertiesFromJsxElementAttributesProperty();
-                // JSX.ElementAttributesProperty [type]
-                const jsxElementAttribPropInterfaceType = jsxElementAttribPropInterfaceSym && getDeclaredTypeOfSymbol(jsxElementAttribPropInterfaceSym);
-                // The properties of JSX.ElementAttributesProperty
-                const propertiesOfJsxElementAttribPropInterface = jsxElementAttribPropInterfaceType && getPropertiesOfType(jsxElementAttribPropInterfaceType);
-                // if there is a property in JSX.ElementAttributesProperty
-                // i.e.
-                // interface ElementAttributesProperty {
-                //     props: {
-                //         children?: any;
-                //     };
-                // }
-                if (propertiesOfJsxElementAttribPropInterface && propertiesOfJsxElementAttribPropInterface.length === 1) {
-                    const propsType = getTypeOfSymbol(propertiesOfJsxElementAttribPropInterface[0]);
-                    const propertiesOfProps = propsType && getPropertiesOfType(propsType);
-                    if (propertiesOfProps && propertiesOfProps.length === 1) {
-                        _jsxElementChildrenPropertyName = propertiesOfProps[0].name;
-                    }
-                }
+            if (!_hasComputedJsxElementChildrenPropertyName) {
+                _hasComputedJsxElementChildrenPropertyName = true;
+                _jsxElementChildrenPropertyName = getNameFromJsxElementAttributesContainer(JsxNames.ElementChildrenAttributeNameContainer);
             }
 
             return _jsxElementChildrenPropertyName;
diff --git a/tests/lib/react.d.ts b/tests/lib/react.d.ts
index cb34c8ab38f9b..0629cb956fc9b 100644
--- a/tests/lib/react.d.ts
+++ b/tests/lib/react.d.ts
@@ -2359,11 +2359,9 @@ declare namespace JSX {
     interface ElementClass extends React.Component<any, any> {
         render(): JSX.Element | null;
     }
-    interface ElementAttributesProperty {
-        props: {
-            children: any;
-        };
-    }
+    interface ElementAttributesProperty { props; }
+
+    interface ElementChildrenAttribute { children; }
 
     interface IntrinsicAttributes extends React.Attributes { }
 

From b7a30c11bd321a1c59c6d902caf4f5c145984be5 Mon Sep 17 00:00:00 2001
From: Yui T <yuisu@microsoft.com>
Date: Wed, 19 Apr 2017 22:33:54 -0700
Subject: [PATCH 20/22] Update tests and baselines

---
 .../checkJsxChildrenProperty1.symbols         |  8 +++---
 .../checkJsxChildrenProperty3.symbols         |  8 +++---
 .../checkJsxChildrenProperty6.symbols         | 12 ++++----
 .../checkJsxChildrenProperty8.symbols         | 12 ++++----
 .../checkJsxChildrenProperty9.symbols         | 28 +++++++++----------
 .../tsxDefaultAttributesResolution1.symbols   |  4 +--
 .../tsxDefaultAttributesResolution2.symbols   |  4 +--
 .../tsxSpreadAttributesResolution1.symbols    |  4 +--
 .../tsxSpreadAttributesResolution11.symbols   |  4 +--
 .../tsxSpreadAttributesResolution3.symbols    |  4 +--
 .../tsxSpreadAttributesResolution4.symbols    |  8 +++---
 .../tsxSpreadAttributesResolution7.symbols    |  4 +--
 .../tsxSpreadAttributesResolution8.symbols    |  4 +--
 .../tsxSpreadAttributesResolution9.symbols    |  4 +--
 .../tsxStatelessFunctionComponents3.symbols   | 14 +++++-----
 .../reference/tsxUnionElementType1.symbols    |  8 +++---
 .../reference/tsxUnionElementType5.symbols    | 12 ++++----
 .../reference/tsxUnionTypeComponent1.symbols  |  4 +--
 ...InFunctionExpressionOfChildrenCallback1.ts |  5 ++--
 19 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.symbols b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
index d80a3b1e82b5f..8793d0edd496d 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty1.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
@@ -23,11 +23,11 @@ function Comp(p: Prop) {
 >Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
 
     return <div>{p.b}</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 >p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
 >p : Symbol(p, Decl(file.tsx, 8, 14))
 >b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 }
 
 // OK
@@ -59,8 +59,8 @@ let k2 =
 >b : Symbol(b, Decl(file.tsx, 19, 16))
 
         <div>hi hi hi!</div>
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
     </Comp>;
 >Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.symbols b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
index e2e8492156fb1..49d146f07dac4 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty3.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
@@ -61,11 +61,11 @@ function UserName0() {
 >user : Symbol(user, Decl(file.tsx, 22, 13))
 
                 <h1>{ user.Name }</h1>
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 >user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
 >user : Symbol(user, Decl(file.tsx, 22, 13))
 >Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 
             ) }
         </FetchUser>
@@ -85,11 +85,11 @@ function UserName1() {
 >user : Symbol(user, Decl(file.tsx, 33, 13))
 
                 <h1>{ user.Name }</h1>
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 >user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
 >user : Symbol(user, Decl(file.tsx, 33, 13))
 >Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 
             ) }
         </FetchUser>
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.symbols b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
index 7935b8cb2fe76..e69b24a89ab22 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty6.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
@@ -29,8 +29,8 @@ class Button extends React.Component<any, any> {
 >render : Symbol(Button.render, Decl(file.tsx, 8, 48))
 
         return (<div>My Button</div>)
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
@@ -39,8 +39,8 @@ function AnotherButton(p: any) {
 >p : Symbol(p, Decl(file.tsx, 14, 23))
 
     return <h1>Just Another Button</h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 }
 
 function Comp(p: Prop) {
@@ -49,11 +49,11 @@ function Comp(p: Prop) {
 >Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
 
     return <div>{p.b}</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 >p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
 >p : Symbol(p, Decl(file.tsx, 18, 14))
 >b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 }
 
 // Ok
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.symbols b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
index 211009642bb53..b6f5f97adac23 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty8.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
@@ -29,8 +29,8 @@ class Button extends React.Component<any, any> {
 >render : Symbol(Button.render, Decl(file.tsx, 8, 48))
 
         return (<div>My Button</div>)
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
@@ -39,8 +39,8 @@ function AnotherButton(p: any) {
 >p : Symbol(p, Decl(file.tsx, 14, 23))
 
     return <h1>Just Another Button</h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 }
 
 function Comp(p: Prop) {
@@ -49,11 +49,11 @@ function Comp(p: Prop) {
 >Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
 
     return <div>{p.b}</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 >p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
 >p : Symbol(p, Decl(file.tsx, 18, 14))
 >b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 }
 
 // OK
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.symbols b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
index d37d8a1bfe656..25a32aae695f8 100644
--- a/tests/baselines/reference/checkJsxChildrenProperty9.symbols
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
@@ -5,26 +5,26 @@ import React = require('react');
 // OK
 let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
 >k1 : Symbol(k1, Decl(file.tsx, 3, 3))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
 >k2 : Symbol(k2, Decl(file.tsx, 4, 3))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
 >user : Symbol(user, Decl(file.tsx, 4, 34))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
 >user : Symbol(user, Decl(file.tsx, 4, 34))
->h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2412, 48))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 let k3 = <div> {1} {"That is a number"} </div>;
 >k3 : Symbol(k3, Decl(file.tsx, 5, 3))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
diff --git a/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols b/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
index fbe4d1bf5dc10..ff8926b0ab0c8 100644
--- a/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
+++ b/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
@@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols b/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
index 15d4a04901f32..61d007ddbefa3 100644
--- a/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
+++ b/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
@@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
index cb18cd27d624b..273ea39281aed 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
@@ -12,8 +12,8 @@ class Poisoned extends React.Component<{}, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 2, 48))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
index 230e7b25dc5ae..5646934ef4155 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
@@ -48,8 +48,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
 >render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
index c136d72444d0e..05de039a49a68 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
@@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
index 6cb0486be61a1..93d8535658e8c 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
@@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
@@ -56,8 +56,8 @@ class EmptyProp extends React.Component<{}, {}> {
 >render : Symbol(EmptyProp.render, Decl(file.tsx, 21, 49))
 
         return <div>Default hi</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
index fd95004c914a1..8a6e3fd317b2e 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
@@ -22,8 +22,8 @@ class TextComponent extends React.Component<TextProps, {}> {
 >render : Symbol(TextComponent.render, Decl(file.tsx, 5, 60))
 
         return <span>Some Text..</span>;
->span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2462, 51))
->span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2462, 51))
+>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2460, 51))
+>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2460, 51))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
index 1d0429a1cd154..2dec493b88676 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
@@ -45,8 +45,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
 >render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
index 26bda335e4fcf..f55b20dfe64c4 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
@@ -23,8 +23,8 @@ class Opt extends React.Component<OptionProp, {}> {
 >render : Symbol(Opt.render, Decl(file.tsx, 7, 51))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols b/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
index 842c8b7b5d93a..a18da7954bc56 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
+++ b/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
@@ -5,7 +5,7 @@ import React = require('react');
 const Foo = (props: any) => <div/>;
 >Foo : Symbol(Foo, Decl(file.tsx, 2, 5))
 >props : Symbol(props, Decl(file.tsx, 2, 13))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 // Should be OK
 const foo = <Foo />;
@@ -19,14 +19,14 @@ var MainMenu: React.StatelessComponent<{}> = (props) => (<div>
 >React : Symbol(React, Decl(file.tsx, 0, 0))
 >StatelessComponent : Symbol(React.StatelessComponent, Decl(react.d.ts, 197, 40))
 >props : Symbol(props, Decl(file.tsx, 8, 46))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
     <h3>Main Menu</h3>
->h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2413, 48))
->h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2413, 48))
+>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2411, 48))
+>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2411, 48))
 
 </div>);
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 var App: React.StatelessComponent<{ children }> = ({children}) => (
 >App : Symbol(App, Decl(file.tsx, 12, 3))
@@ -36,12 +36,12 @@ var App: React.StatelessComponent<{ children }> = ({children}) => (
 >children : Symbol(children, Decl(file.tsx, 12, 52))
 
     <div >
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
         <MainMenu/>
 >MainMenu : Symbol(MainMenu, Decl(file.tsx, 8, 3))
 
 	</div>
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 );
diff --git a/tests/baselines/reference/tsxUnionElementType1.symbols b/tests/baselines/reference/tsxUnionElementType1.symbols
index 72b9d96dbe6aa..728e559ee65d8 100644
--- a/tests/baselines/reference/tsxUnionElementType1.symbols
+++ b/tests/baselines/reference/tsxUnionElementType1.symbols
@@ -8,8 +8,8 @@ function SFC1(prop: { x: number }) {
 >x : Symbol(x, Decl(file.tsx, 2, 21))
 
     return <div>hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 };
 
@@ -19,8 +19,8 @@ function SFC2(prop: { x: boolean }) {
 >x : Symbol(x, Decl(file.tsx, 6, 21))
 
     return <h1>World </h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 }
 
 var SFCComp = SFC1 || SFC2;
diff --git a/tests/baselines/reference/tsxUnionElementType5.symbols b/tests/baselines/reference/tsxUnionElementType5.symbols
index 394e530231d6a..9a5e94f69a319 100644
--- a/tests/baselines/reference/tsxUnionElementType5.symbols
+++ b/tests/baselines/reference/tsxUnionElementType5.symbols
@@ -6,16 +6,16 @@ function EmptySFC1() {
 >EmptySFC1 : Symbol(EmptySFC1, Decl(file.tsx, 0, 32))
 
     return <div>hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 }
 
 function EmptySFC2() {
 >EmptySFC2 : Symbol(EmptySFC2, Decl(file.tsx, 4, 1))
 
     return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2401, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 }
 
 function SFC2(prop: { x: boolean }) {
@@ -24,8 +24,8 @@ function SFC2(prop: { x: boolean }) {
 >x : Symbol(x, Decl(file.tsx, 10, 21))
 
     return <h1>World</h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2411, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 }
 
 var EmptySFCComp = EmptySFC1 || EmptySFC2;
diff --git a/tests/baselines/reference/tsxUnionTypeComponent1.symbols b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
index 81ebe5ec01529..4af712bf3fc3e 100644
--- a/tests/baselines/reference/tsxUnionTypeComponent1.symbols
+++ b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
@@ -38,8 +38,8 @@ class MyComponent extends React.Component<ComponentProps, {}> {
 <MyComponent AnyComponent={() => <button>test</button>}/>
 >MyComponent : Symbol(MyComponent, Decl(file.tsx, 4, 1))
 >AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 14, 12))
->button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2387, 43))
->button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2387, 43))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2385, 43))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2385, 43))
 
 // Component Class as Props
 class MyButtonComponent extends React.Component<{},{}> {
diff --git a/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts
index 491188115ebbb..d849948775e62 100644
--- a/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts
+++ b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts
@@ -7,9 +7,8 @@
 ////     interface Element { }
 ////     interface IntrinsicElements {
 ////     }
-////     interface ElementAttributesProperty {
-////        props: { children; }
-////     }
+////     interface ElementAttributesProperty { props; }
+////     interface ElementChildrenAttribute { children; }
 //// }
 //// interface IUser {
 ////     Name: string;

From e03be4518265c6ff08a6f16e3c73fbb4772e418e Mon Sep 17 00:00:00 2001
From: Yui T <yuisu@microsoft.com>
Date: Wed, 19 Apr 2017 22:42:07 -0700
Subject: [PATCH 21/22] Fix spelling and add comment

---
 src/compiler/checker.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 0524c24a70047..e7939967a4b75 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13478,8 +13478,12 @@ namespace ts {
         }
 
         /** 
+         * Look into JSX namespace and then look for container with matching name as nameOfAttribPropContainer.
+         * Get a single property from that container if existed. Report an error if there are more than one property.
          * 
-        */
+         * @param nameOfAttribPropContainer a string of value JsxNames.ElementAttributesPropertyNameContainer or JsxNames.ElementChildrenAttributeNameContainer
+         *          if other string is given or the container doesn't exist, return undefined.
+         **/
         function getNameFromJsxElementAttributesContainer(nameOfAttribPropContainer: string): string {
             // JSX
             const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
@@ -14647,7 +14651,7 @@ namespace ts {
             //         We can figure that out by resolving attributes property and check number of properties in the resolved type
             // If the call has correct arity, we will then check if the argument type and parameter type is assignable
 
-            const callIsIncomplete = node.attributes.end === node.end;  // If we are missing the close "/>", the call is incoplete
+            const callIsIncomplete = node.attributes.end === node.end;  // If we are missing the close "/>", the call is incomplete
             if (callIsIncomplete) {
                 return true;
             }

From e7e13ecbfcd5207073cc1ff2b57cbd05ea84b9b0 Mon Sep 17 00:00:00 2001
From: Kanchalai Tanglertsampan <yuisu@microsoft.com>
Date: Fri, 21 Apr 2017 09:42:19 -0700
Subject: [PATCH 22/22] Fix linting

---
 src/compiler/checker.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index e7939967a4b75..ff58a4e67ae8e 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13477,13 +13477,13 @@ namespace ts {
             return getUnionType(map(signatures, getReturnTypeOfSignature), /*subtypeReduction*/ true);
         }
 
-        /** 
+        /**
          * Look into JSX namespace and then look for container with matching name as nameOfAttribPropContainer.
          * Get a single property from that container if existed. Report an error if there are more than one property.
-         * 
+         *
          * @param nameOfAttribPropContainer a string of value JsxNames.ElementAttributesPropertyNameContainer or JsxNames.ElementChildrenAttributeNameContainer
          *          if other string is given or the container doesn't exist, return undefined.
-         **/
+         */
         function getNameFromJsxElementAttributesContainer(nameOfAttribPropContainer: string): string {
             // JSX
             const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);