[Master] Fix 11566 - Allow SFC to return null

src/compiler/checker.ts

@@ -344,7 +344,8 @@ namespace ts {
         });
         const typeofType = createTypeofType();
 
-        let jsxElementType: Type;
+        let getJsxElementType: () => Type;
+        let getJsxStatelessElementType: () => Type;
         let _jsxNamespace: string;
         let _jsxFactoryEntity: EntityName;
 
@@ -12183,12 +12184,12 @@ namespace ts {
                 type.flags & TypeFlags.UnionOrIntersection && !forEach((<UnionOrIntersectionType>type).types, t => !isValidSpreadType(t)));
         }
 
-        function checkJsxSelfClosingElement(node: JsxSelfClosingElement) {
+        function checkJsxSelfClosingElement(node: JsxSelfClosingElement): Type {
             checkJsxOpeningLikeElement(node);
-            return jsxElementType || anyType;
+            return getJsxElementType() || anyType;
         }
 
-        function checkJsxElement(node: JsxElement) {
+        function checkJsxElement(node: JsxElement): Type {
             // Check attributes
             checkJsxOpeningLikeElement(node.openingElement);
 
@@ -12215,7 +12216,7 @@ namespace ts {
                 }
             }
 
-            return jsxElementType || anyType;
+            return getJsxElementType() || anyType;
         }
 
         /**
@@ -12454,13 +12455,14 @@ namespace ts {
         function defaultTryGetJsxStatelessFunctionAttributesType(openingLikeElement: JsxOpeningLikeElement, elementType: Type, elemInstanceType: Type, elementClassType?: Type): Type {
             Debug.assert(!(elementType.flags & TypeFlags.Union));
             if (!elementClassType || !isTypeAssignableTo(elemInstanceType, elementClassType)) {
-                if (jsxElementType) {
+                const jsxStatelessElementType = getJsxStatelessElementType();
+                if (jsxStatelessElementType) {
                     // We don't call getResolvedSignature here because we have already resolve the type of JSX Element.
                     const callSignature = getResolvedJsxStatelessFunctionSignature(openingLikeElement, elementType, /*candidatesOutArray*/ undefined);
                     if (callSignature !== unknownSignature) {
                         const callReturnType = callSignature && getReturnTypeOfSignature(callSignature);
                         let paramType = callReturnType && (callSignature.parameters.length === 0 ? emptyObjectType : getTypeOfSymbol(callSignature.parameters[0]));
-                        if (callReturnType && isTypeAssignableTo(callReturnType, jsxElementType)) {
+                        if (callReturnType && isTypeAssignableTo(callReturnType, jsxStatelessElementType)) {
                             // Intersect in JSX.IntrinsicAttributes if it exists
                             const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes);
                             if (intrinsicAttributes !== unknownType) {
@@ -12488,6 +12490,7 @@ namespace ts {
             Debug.assert(!(elementType.flags & TypeFlags.Union));
             if (!elementClassType || !isTypeAssignableTo(elemInstanceType, elementClassType)) {
                 // Is this is a stateless function component? See if its single signature's return type is assignable to the JSX Element Type
+                const jsxElementType = getJsxElementType();
                 if (jsxElementType) {
                     // We don't call getResolvedSignature because here we have already resolve the type of JSX Element.
                     const candidatesOutArray: Signature[] = [];
@@ -12760,7 +12763,7 @@ namespace ts {
                 error(errorNode, Diagnostics.Cannot_use_JSX_unless_the_jsx_flag_is_provided);
             }
 
-            if (jsxElementType === undefined) {
+            if (getJsxElementType() === undefined) {
                 if (compilerOptions.noImplicitAny) {
                     error(errorNode, Diagnostics.JSX_element_implicitly_has_type_any_because_the_global_type_JSX_Element_does_not_exist);
                 }
@@ -21638,7 +21641,8 @@ namespace ts {
             globalBooleanType = getGlobalType("Boolean");
             globalRegExpType = getGlobalType("RegExp");
 
-            jsxElementType = getExportedTypeFromNamespace("JSX", JsxNames.Element);
+            getJsxElementType = memoize(() => getExportedTypeFromNamespace("JSX", JsxNames.Element));
+            getJsxStatelessElementType = memoize(createJsxStatelessElementType);
             getGlobalClassDecoratorType = memoize(() => getGlobalType("ClassDecorator"));
             getGlobalPropertyDecoratorType = memoize(() => getGlobalType("PropertyDecorator"));
             getGlobalMethodDecoratorType = memoize(() => getGlobalType("MethodDecorator"));
@@ -21719,6 +21723,10 @@ namespace ts {
             return externalHelpersModule;
         }
 
+        function createJsxStatelessElementType() {
+            const jsxElementType = getJsxElementType();
+            return jsxElementType ? getUnionType([jsxElementType, nullType]) : nullType;
+        }
 
         function createInstantiatedPromiseLikeType(): ObjectType {
             const promiseLikeType = getGlobalPromiseLikeType();

tests/baselines/reference/tsxSFCReturnNull.js

@@ -0,0 +1,24 @@
+//// [file.tsx]
+
+import React = require('react');
+
+const Foo = (props: any) => null;
+
+function Greet(x: {name?: string}) {
+	return null;
+}
+
+const foo = <Foo />;
+const G = <Greet />;
+
+//// [file.jsx]
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    exports.__esModule = true;
+    var Foo = function (props) { return null; };
+    function Greet(x) {
+        return null;
+    }
+    var foo = <Foo />;
+    var G = <Greet />;
+});

tests/baselines/reference/tsxSFCReturnNull.symbols

@@ -0,0 +1,25 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+const Foo = (props: any) => null;
+>Foo : Symbol(Foo, Decl(file.tsx, 3, 5))
+>props : Symbol(props, Decl(file.tsx, 3, 13))
+
+function Greet(x: {name?: string}) {
+>Greet : Symbol(Greet, Decl(file.tsx, 3, 33))
+>x : Symbol(x, Decl(file.tsx, 5, 15))
+>name : Symbol(name, Decl(file.tsx, 5, 19))
+
+	return null;
+}
+
+const foo = <Foo />;
+>foo : Symbol(foo, Decl(file.tsx, 9, 5))
+>Foo : Symbol(Foo, Decl(file.tsx, 3, 5))
+
+const G = <Greet />;
+>G : Symbol(G, Decl(file.tsx, 10, 5))
+>Greet : Symbol(Greet, Decl(file.tsx, 3, 33))
+

tests/baselines/reference/tsxSFCReturnNull.types

@@ -0,0 +1,30 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+import React = require('react');
+>React : typeof React
+
+const Foo = (props: any) => null;
+>Foo : (props: any) => any
+>(props: any) => null : (props: any) => any
+>props : any
+>null : null
+
+function Greet(x: {name?: string}) {
+>Greet : (x: { name?: string; }) => any
+>x : { name?: string; }
+>name : string
+
+	return null;
+>null : null
+}
+
+const foo = <Foo />;
+>foo : JSX.Element
+><Foo /> : JSX.Element
+>Foo : (props: any) => any
+
+const G = <Greet />;
+>G : JSX.Element
+><Greet /> : JSX.Element
+>Greet : (x: { name?: string; }) => any
+

tests/baselines/reference/tsxSFCReturnNullStrictNullChecks.js

@@ -0,0 +1,24 @@
+//// [file.tsx]
+
+import React = require('react');
+
+const Foo = (props: any) => null;
+
+function Greet(x: {name?: string}) {
+	return null;
+}
+
+const foo = <Foo />;
+const G = <Greet />;
+
+//// [file.jsx]
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    exports.__esModule = true;
+    var Foo = function (props) { return null; };
+    function Greet(x) {
+        return null;
+    }
+    var foo = <Foo />;
+    var G = <Greet />;
+});

tests/baselines/reference/tsxSFCReturnNullStrictNullChecks.symbols

@@ -0,0 +1,25 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+const Foo = (props: any) => null;
+>Foo : Symbol(Foo, Decl(file.tsx, 3, 5))
+>props : Symbol(props, Decl(file.tsx, 3, 13))
+
+function Greet(x: {name?: string}) {
+>Greet : Symbol(Greet, Decl(file.tsx, 3, 33))
+>x : Symbol(x, Decl(file.tsx, 5, 15))
+>name : Symbol(name, Decl(file.tsx, 5, 19))
+
+	return null;
+}
+
+const foo = <Foo />;
+>foo : Symbol(foo, Decl(file.tsx, 9, 5))
+>Foo : Symbol(Foo, Decl(file.tsx, 3, 5))
+
+const G = <Greet />;
+>G : Symbol(G, Decl(file.tsx, 10, 5))
+>Greet : Symbol(Greet, Decl(file.tsx, 3, 33))
+

tests/baselines/reference/tsxSFCReturnNullStrictNullChecks.types

@@ -0,0 +1,30 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+
+import React = require('react');
+>React : typeof React
+
+const Foo = (props: any) => null;
+>Foo : (props: any) => null
+>(props: any) => null : (props: any) => null
+>props : any
+>null : null
+
+function Greet(x: {name?: string}) {
+>Greet : (x: { name?: string | undefined; }) => null
+>x : { name?: string | undefined; }
+>name : string | undefined
+
+	return null;
+>null : null
+}
+
+const foo = <Foo />;
+>foo : JSX.Element
+><Foo /> : JSX.Element
+>Foo : (props: any) => null
+
+const G = <Greet />;
+>G : JSX.Element
+><Greet /> : JSX.Element
+>Greet : (x: { name?: string | undefined; }) => null
+

tests/baselines/reference/tsxSFCReturnUndefinedStrictNullChecks.errors.txt

@@ -0,0 +1,20 @@
+tests/cases/conformance/jsx/file.tsx(10,13): error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements.
+tests/cases/conformance/jsx/file.tsx(11,11): error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements.
+
+
+==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
+
+    import React = require('react');
+
+    const Foo = (props: any) => undefined;
+    function Greet(x: {name?: string}) {
+    	return undefined;
+    }
+
+    // Error
+    const foo = <Foo />;
+                ~~~~~~~
+!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements.
+    const G = <Greet />;
+              ~~~~~~~~~
+!!! error TS2605: JSX element type 'undefined' is not a constructor function for JSX elements.

tests/baselines/reference/tsxSFCReturnUndefinedStrictNullChecks.js

@@ -0,0 +1,25 @@
+//// [file.tsx]
+
+import React = require('react');
+
+const Foo = (props: any) => undefined;
+function Greet(x: {name?: string}) {
+	return undefined;
+}
+
+// Error
+const foo = <Foo />;
+const G = <Greet />;
+
+//// [file.jsx]
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    exports.__esModule = true;
+    var Foo = function (props) { return undefined; };
+    function Greet(x) {
+        return undefined;
+    }
+    // Error
+    var foo = <Foo />;
+    var G = <Greet />;
+});

tests/cases/conformance/jsx/tsxSFCReturnNull.tsx

@@ -0,0 +1,16 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+const Foo = (props: any) => null;
+
+function Greet(x: {name?: string}) {
+	return null;
+}
+
+const foo = <Foo />;
+const G = <Greet />;

tests/cases/conformance/jsx/tsxSFCReturnNullStrictNullChecks.tsx

@@ -0,0 +1,17 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @strictNullChecks: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+const Foo = (props: any) => null;
+
+function Greet(x: {name?: string}) {
+	return null;
+}
+
+const foo = <Foo />;
+const G = <Greet />;

tests/cases/conformance/jsx/tsxSFCReturnUndefinedStrictNullChecks.tsx

@@ -0,0 +1,17 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @module: amd
+// @noLib: true
+// @strictNullChecks: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+const Foo = (props: any) => undefined;
+function Greet(x: {name?: string}) {
+	return undefined;
+}
+
+// Error
+const foo = <Foo />;
+const G = <Greet />;