Use jsxFragmentFactory entity name for factory name lookup from checking fragments (#39475)

src/compiler/checker.ts

@@ -968,6 +968,11 @@ namespace ts {
                                 return file.localJsxFragmentNamespace = getFirstIdentifier(file.localJsxFragmentFactory).escapedText;
                             }
                         }
+                        const entity = getJsxFragmentFactoryEntity(location);
+                        if (entity) {
+                            file.localJsxFragmentFactory = entity;
+                            return file.localJsxFragmentNamespace = getFirstIdentifier(entity).escapedText;
+                        }
                     }
                     else {
                         if (file.localJsxNamespace) {

tests/baselines/reference/jsxFactoryAndJsxFragmentFactory.js

@@ -1,5 +1,6 @@
 //// [jsxFactoryAndJsxFragmentFactory.tsx]
 declare var h: any;
+declare var Frag: any;
 
 <></>;
 <><span>1</span><><span>2.1</span><span>2.2</span></></>;

tests/baselines/reference/jsxFactoryAndJsxFragmentFactory.symbols

@@ -2,5 +2,8 @@
 declare var h: any;
 >h : Symbol(h, Decl(jsxFactoryAndJsxFragmentFactory.tsx, 0, 11))
 
+declare var Frag: any;
+>Frag : Symbol(Frag, Decl(jsxFactoryAndJsxFragmentFactory.tsx, 1, 11))
+
 <></>;
 <><span>1</span><><span>2.1</span><span>2.2</span></></>;

tests/baselines/reference/jsxFactoryAndJsxFragmentFactory.types

@@ -2,6 +2,9 @@
 declare var h: any;
 >h : any
 
+declare var Frag: any;
+>Frag : any
+
 <></>;
 ><></> : error
 

tests/baselines/reference/jsxFragmentFactoryNoUnusedLocals.js

@@ -0,0 +1,30 @@
+//// [jsxFragmentFactoryNoUnusedLocals.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import { Fragment, createElement } from "react"
+
+type CounterProps = {
+    count?: number
+}
+
+export function Counter({ count = 0 }: CounterProps) {
+    const [cnt, setCnt] = null as any;
+    return <>
+        <p>{cnt}</p>
+        <button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button>
+    </>
+}
+
+//// [jsxFragmentFactoryNoUnusedLocals.js]
+"use strict";
+exports.__esModule = true;
+exports.Counter = void 0;
+/// <reference path="react16.d.ts" />
+var react_1 = require("react");
+function Counter(_a) {
+    var _b = _a.count, count = _b === void 0 ? 0 : _b;
+    var _c = null, cnt = _c[0], setCnt = _c[1];
+    return react_1.createElement(react_1.Fragment, null,
+        react_1.createElement("p", null, cnt),
+        react_1.createElement("button", { onClick: function () { return setCnt(function (prev) { return prev + 1; }); }, type: "button" }, "Update"));
+}
+exports.Counter = Counter;

tests/baselines/reference/jsxFragmentFactoryNoUnusedLocals.symbols

@@ -0,0 +1,39 @@
+=== tests/cases/compiler/jsxFragmentFactoryNoUnusedLocals.tsx ===
+/// <reference path="react16.d.ts" />
+import { Fragment, createElement } from "react"
+>Fragment : Symbol(Fragment, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 1, 8))
+>createElement : Symbol(createElement, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 1, 18))
+
+type CounterProps = {
+>CounterProps : Symbol(CounterProps, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 1, 47))
+
+    count?: number
+>count : Symbol(count, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 3, 21))
+}
+
+export function Counter({ count = 0 }: CounterProps) {
+>Counter : Symbol(Counter, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 5, 1))
+>count : Symbol(count, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 7, 25))
+>CounterProps : Symbol(CounterProps, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 1, 47))
+
+    const [cnt, setCnt] = null as any;
+>cnt : Symbol(cnt, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 8, 11))
+>setCnt : Symbol(setCnt, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 8, 15))
+
+    return <>
+        <p>{cnt}</p>
+>p : Symbol(JSX.IntrinsicElements.p, Decl(react16.d.ts, 2467, 102))
+>cnt : Symbol(cnt, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 8, 11))
+>p : Symbol(JSX.IntrinsicElements.p, Decl(react16.d.ts, 2467, 102))
+
+        <button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button>
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react16.d.ts, 2406, 96))
+>onClick : Symbol(onClick, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 11, 15))
+>setCnt : Symbol(setCnt, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 8, 15))
+>prev : Symbol(prev, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 11, 39))
+>prev : Symbol(prev, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 11, 39))
+>type : Symbol(type, Decl(jsxFragmentFactoryNoUnusedLocals.tsx, 11, 58))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react16.d.ts, 2406, 96))
+
+    </>
+}

tests/baselines/reference/jsxFragmentFactoryNoUnusedLocals.types

@@ -0,0 +1,50 @@
+=== tests/cases/compiler/jsxFragmentFactoryNoUnusedLocals.tsx ===
+/// <reference path="react16.d.ts" />
+import { Fragment, createElement } from "react"
+>Fragment : import("react").ComponentType<{}>
+>createElement : { (type: "input", props?: import("react").InputHTMLAttributes<HTMLInputElement> & import("react").ClassAttributes<HTMLInputElement>, ...children: import("react").ReactNode[]): import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>; <P extends import("react").HTMLAttributes<T>, T extends HTMLElement>(type: "object" | "time" | "link" | "menu" | "dialog" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview", props?: import("react").ClassAttributes<T> & P, ...children: import("react").ReactNode[]): import("react").DetailedReactHTMLElement<P, T>; <P extends import("react").SVGAttributes<T>, T extends SVGElement>(type: "symbol" | "text" | "animate" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "textPath" | "tspan" | "use" | "view", props?: import("react").ClassAttributes<T> & P, ...children: import("react").ReactNode[]): import("react").ReactSVGElement; <P extends import("react").DOMAttributes<T>, T extends Element>(type: string, props?: import("react").ClassAttributes<T> & P, ...children: import("react").ReactNode[]): import("react").DOMElement<P, T>; <P>(type: import("react").SFC<P>, props?: import("react").Attributes & P, ...children: import("react").ReactNode[]): import("react").SFCElement<P>; <P>(type: import("react").ClassType<P, import("react").ClassicComponent<P, any>, import("react").ClassicComponentClass<P>>, props?: import("react").ClassAttributes<import("react").ClassicComponent<P, any>> & P, ...children: import("react").ReactNode[]): import("react").CElement<P, import("react").ClassicComponent<P, any>>; <P, T extends import("react").Component<P, any, any>, C extends import("react").ComponentClass<P, any>>(type: import("react").ClassType<P, T, C>, props?: import("react").ClassAttributes<T> & P, ...children: import("react").ReactNode[]): import("react").CElement<P, T>; <P>(type: string | import("react").SFC<P> | import("react").ComponentClass<P, any>, props?: import("react").Attributes & P, ...children: import("react").ReactNode[]): import("react").ReactElement<P>; }
+
+type CounterProps = {
+>CounterProps : CounterProps
+
+    count?: number
+>count : number
+}
+
+export function Counter({ count = 0 }: CounterProps) {
+>Counter : ({ count }: CounterProps) => JSX.Element
+>count : number
+>0 : 0
+
+    const [cnt, setCnt] = null as any;
+>cnt : any
+>setCnt : any
+>null as any : any
+>null : null
+
+    return <>
+><>        <p>{cnt}</p>        <button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button>    </> : JSX.Element
+
+        <p>{cnt}</p>
+><p>{cnt}</p> : JSX.Element
+>p : any
+>cnt : any
+>p : any
+
+        <button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button>
+><button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button> : JSX.Element
+>button : any
+>onClick : () => any
+>() => setCnt((prev) => prev + 1) : () => any
+>setCnt((prev) => prev + 1) : any
+>setCnt : any
+>(prev) => prev + 1 : (prev: any) => any
+>prev : any
+>prev + 1 : any
+>prev : any
+>1 : 1
+>type : string
+>button : any
+
+    </>
+}

tests/cases/compiler/jsxFactoryAndJsxFragmentFactory.tsx

@@ -3,6 +3,7 @@
 //@jsxFragmentFactory: Frag
 
 declare var h: any;
+declare var Frag: any;
 
 <></>;
 <><span>1</span><><span>2.1</span><span>2.2</span></></>;

tests/cases/compiler/jsxFragmentFactoryNoUnusedLocals.tsx

@@ -0,0 +1,18 @@
+// @jsx: react
+// @jsxFactory: createElement
+// @jsxFragmentFactory: Fragment
+// @noUnusedLocals: true
+/// <reference path="/.lib/react16.d.ts" />
+import { Fragment, createElement } from "react"
+
+type CounterProps = {
+    count?: number
+}
+
+export function Counter({ count = 0 }: CounterProps) {
+    const [cnt, setCnt] = null as any;
+    return <>
+        <p>{cnt}</p>
+        <button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button>
+    </>
+}