Merge pull request #7622 from Microsoft/findAllReferencesForJSXTagNames

Fix issue with find references for jsx tags

Author: mhegazy

src/compiler/checker.ts

@@ -8749,6 +8749,9 @@ namespace ts {
             if (isJsxIntrinsicIdentifier(node.tagName)) {
                 return getIntrinsicTagSymbol(node);
             }
+            else if (node.tagName.kind === SyntaxKind.Identifier) {
+                return resolveEntityName(node.tagName, SymbolFlags.Value | SymbolFlags.Alias);
+            }
             else {
                 return checkExpression(node.tagName).symbol;
             }

tests/baselines/reference/jsxReactTestSuite.symbols

@@ -56,9 +56,11 @@ declare var hasOwnProperty:any;
 >div : Symbol(unknown)
 
   <Component>{foo}<br />{bar}</Component>
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >foo : Symbol(foo, Decl(jsxReactTestSuite.tsx, 7, 11))
 >br : Symbol(unknown)
 >bar : Symbol(bar, Decl(jsxReactTestSuite.tsx, 8, 11))
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 
   <br />
 >br : Symbol(unknown)
@@ -68,12 +70,20 @@ declare var hasOwnProperty:any;
 
 
 <Composite>
+>Composite : Symbol(Composite, Decl(jsxReactTestSuite.tsx, 3, 11))
+
     {this.props.children}
 </Composite>;
+>Composite : Symbol(Composite, Decl(jsxReactTestSuite.tsx, 3, 11))
 
 <Composite>
+>Composite : Symbol(Composite, Decl(jsxReactTestSuite.tsx, 3, 11))
+
     <Composite2 />
+>Composite2 : Symbol(Composite2, Decl(jsxReactTestSuite.tsx, 4, 11))
+
 </Composite>;
+>Composite : Symbol(Composite, Decl(jsxReactTestSuite.tsx, 3, 11))
 
 var x =
 >x : Symbol(x, Decl(jsxReactTestSuite.tsx, 10, 11), Decl(jsxReactTestSuite.tsx, 35, 3))
@@ -164,62 +174,76 @@ var x =
 >hasOwnProperty : Symbol(unknown)
 
 <Component constructor="foo" />;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >constructor : Symbol(unknown)
 
 <Namespace.Component />;
 
 <Namespace.DeepNamespace.Component />;
 
 <Component { ... x } y
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(x, Decl(jsxReactTestSuite.tsx, 10, 11), Decl(jsxReactTestSuite.tsx, 35, 3))
 >y : Symbol(unknown)
 
 ={2 } z />;
 >z : Symbol(unknown)
 
 <Component
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
+
     {...this.props} sound="moo" />;
 >sound : Symbol(unknown)
 
 <font-face />;
 >font-face : Symbol(unknown)
 
 <Component x={y} />;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(unknown)
 >y : Symbol(y, Decl(jsxReactTestSuite.tsx, 9, 11))
 
 <x-component />;
 >x-component : Symbol(unknown)
 
 <Component {...x} />;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(x, Decl(jsxReactTestSuite.tsx, 10, 11), Decl(jsxReactTestSuite.tsx, 35, 3))
 
 <Component { ...x } y={2} />;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(x, Decl(jsxReactTestSuite.tsx, 10, 11), Decl(jsxReactTestSuite.tsx, 35, 3))
 >y : Symbol(unknown)
 
 <Component { ... x } y={2} z />;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(x, Decl(jsxReactTestSuite.tsx, 10, 11), Decl(jsxReactTestSuite.tsx, 35, 3))
 >y : Symbol(unknown)
 >z : Symbol(unknown)
 
 <Component x={1} {...y} />;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(unknown)
 >y : Symbol(y, Decl(jsxReactTestSuite.tsx, 9, 11))
 
 
 <Component x={1} y="2" {...z} {...z}><Child /></Component>;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(unknown)
 >y : Symbol(unknown)
 >z : Symbol(z, Decl(jsxReactTestSuite.tsx, 11, 11))
 >z : Symbol(z, Decl(jsxReactTestSuite.tsx, 11, 11))
+>Child : Symbol(Child, Decl(jsxReactTestSuite.tsx, 5, 11))
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 
 <Component x="1" {...(z = { y: 2 }, z)} z={3}>Text</Component>;
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 >x : Symbol(unknown)
 >z : Symbol(z, Decl(jsxReactTestSuite.tsx, 11, 11))
 >y : Symbol(y, Decl(jsxReactTestSuite.tsx, 113, 27))
 >z : Symbol(z, Decl(jsxReactTestSuite.tsx, 11, 11))
 >z : Symbol(unknown)
+>Component : Symbol(Component, Decl(jsxReactTestSuite.tsx, 2, 11))
 
 
 

tests/baselines/reference/reactNamespaceJSXEmit.symbols

@@ -17,16 +17,19 @@ declare var x: any;
 >data : Symbol(unknown)
 
 <Bar x={x} />;
+>Bar : Symbol(Bar, Decl(reactNamespaceJSXEmit.tsx, 3, 11))
 >x : Symbol(unknown)
 >x : Symbol(x, Decl(reactNamespaceJSXEmit.tsx, 4, 11))
 
 <x-component />;
 >x-component : Symbol(unknown)
 
 <Bar {...x} />;
+>Bar : Symbol(Bar, Decl(reactNamespaceJSXEmit.tsx, 3, 11))
 >x : Symbol(x, Decl(reactNamespaceJSXEmit.tsx, 4, 11))
 
 <Bar { ...x } y={2} />;
+>Bar : Symbol(Bar, Decl(reactNamespaceJSXEmit.tsx, 3, 11))
 >x : Symbol(x, Decl(reactNamespaceJSXEmit.tsx, 4, 11))
 >y : Symbol(unknown)
 

tests/baselines/reference/tsxElementResolution19.symbols

@@ -24,5 +24,5 @@ import {MyClass} from './file1';
 >MyClass : Symbol(MyClass, Decl(file2.tsx, 3, 8))
 
 <MyClass />;
->MyClass : Symbol(MyClass, Decl(file1.tsx, 2, 1))
+>MyClass : Symbol(MyClass, Decl(file2.tsx, 3, 8))
 

tests/baselines/reference/tsxExternalModuleEmit1.symbols

@@ -25,7 +25,7 @@ export class App extends React.Component<any, any> {
 >render : Symbol(App.render, Decl(app.tsx, 5, 52))
 
         return <Button />;
->Button : Symbol(Button, Decl(button.tsx, 0, 31))
+>Button : Symbol(Button, Decl(app.tsx, 3, 8))
     }
 
 }

tests/baselines/reference/tsxExternalModuleEmit2.symbols

@@ -18,11 +18,15 @@ declare var Foo, React;
 
 // Should see mod_1['default'] in emit here
 <Foo handler={Main}></Foo>;
+>Foo : Symbol(Foo, Decl(app.tsx, 1, 11))
 >handler : Symbol(unknown)
 >Main : Symbol(Main, Decl(app.tsx, 0, 6))
+>Foo : Symbol(Foo, Decl(app.tsx, 1, 11))
 
 // Should see mod_1['default'] in emit here
 <Foo {...Main}></Foo>;
+>Foo : Symbol(Foo, Decl(app.tsx, 1, 11))
 >Main : Symbol(Main, Decl(app.tsx, 0, 6))
+>Foo : Symbol(Foo, Decl(app.tsx, 1, 11))
 
 

tests/baselines/reference/tsxGenericArrowFunctionParsing.symbols

@@ -15,6 +15,8 @@ var T, T1, T2;
 // This is an element
 var x1 = <T>() => {}</T>;
 >x1 : Symbol(x1, Decl(file.tsx, 7, 3))
+>T : Symbol(T, Decl(file.tsx, 4, 3))
+>T : Symbol(T, Decl(file.tsx, 4, 3))
 
 x1.isElement;
 >x1.isElement : Symbol(JSX.Element.isElement, Decl(file.tsx, 1, 20))
@@ -41,7 +43,9 @@ x3();
 // This is an element
 var x4 = <T extends={true}>() => {}</T>;
 >x4 : Symbol(x4, Decl(file.tsx, 19, 3))
+>T : Symbol(T, Decl(file.tsx, 4, 3))
 >extends : Symbol(unknown)
+>T : Symbol(T, Decl(file.tsx, 4, 3))
 
 x4.isElement;
 >x4.isElement : Symbol(JSX.Element.isElement, Decl(file.tsx, 1, 20))
@@ -51,7 +55,9 @@ x4.isElement;
 // This is an element
 var x5 = <T extends>() => {}</T>;
 >x5 : Symbol(x5, Decl(file.tsx, 23, 3))
+>T : Symbol(T, Decl(file.tsx, 4, 3))
 >extends : Symbol(unknown)
+>T : Symbol(T, Decl(file.tsx, 4, 3))
 
 x5.isElement;
 >x5.isElement : Symbol(JSX.Element.isElement, Decl(file.tsx, 1, 20))

tests/baselines/reference/tsxPreserveEmit1.symbols

@@ -13,6 +13,7 @@ import Route = ReactRouter.Route;
 
 var routes1 = <Route />;
 >routes1 : Symbol(routes1, Decl(test.tsx, 6, 3))
+>Route : Symbol(Route, Decl(test.tsx, 2, 45))
 
 module M {
 >M : Symbol(M, Decl(test.tsx, 6, 24), Decl(test.tsx, 10, 1))
@@ -26,6 +27,8 @@ module M {
 	// Should emit 'M.X' in both opening and closing tags
 	var y = <X></X>;
 >y : Symbol(y, Decl(test.tsx, 13, 4))
+>X : Symbol(X, Decl(test.tsx, 9, 11))
+>X : Symbol(X, Decl(test.tsx, 9, 11))
 }
 
 === tests/cases/conformance/jsx/react.d.ts ===

tests/baselines/reference/tsxPreserveEmit2.symbols

@@ -6,4 +6,5 @@ var Route: any;
 
 var routes1 = <Route />;
 >routes1 : Symbol(routes1, Decl(test.tsx, 3, 3))
+>Route : Symbol(Route, Decl(test.tsx, 2, 3))
 

tests/baselines/reference/tsxReactEmit3.symbols

@@ -13,3 +13,11 @@ declare var Foo, Bar, baz;
 >baz : Symbol(baz, Decl(test.tsx, 4, 21))
 
 <Foo> <Bar> q </Bar> <Bar/>   s <Bar/><Bar/></Foo>;
+>Foo : Symbol(Foo, Decl(test.tsx, 4, 11))
+>Bar : Symbol(Bar, Decl(test.tsx, 4, 16))
+>Bar : Symbol(Bar, Decl(test.tsx, 4, 16))
+>Bar : Symbol(Bar, Decl(test.tsx, 4, 16))
+>Bar : Symbol(Bar, Decl(test.tsx, 4, 16))
+>Bar : Symbol(Bar, Decl(test.tsx, 4, 16))
+>Foo : Symbol(Foo, Decl(test.tsx, 4, 11))
+

tests/baselines/reference/tsxStatelessFunctionComponents3.symbols

@@ -11,7 +11,7 @@ const Foo = (props: any) => <div/>;
 // Should be OK
 const foo = <Foo />;
 >foo : Symbol(foo, Decl(file.tsx, 5, 5))
->Foo : Symbol((Anonymous function), Decl(file.tsx, 3, 11))
+>Foo : Symbol(Foo, Decl(file.tsx, 3, 5))
 
 
 // Should be OK
@@ -40,7 +40,7 @@ var App: React.StatelessComponent<{ children }> = ({children}) => (
 >div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 927, 45))
 
         <MainMenu/>
->MainMenu : Symbol(React.StatelessComponent, Decl(react.d.ts, 139, 5))
+>MainMenu : Symbol(MainMenu, Decl(file.tsx, 9, 3))
 
 	</div>
 >div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 927, 45))

tests/cases/fourslash/findReferencesJSXTagName.ts

@@ -0,0 +1,22 @@
+/// <reference path='fourslash.ts'/>
+
+// @Filename: index.tsx
+////import { /*1*/SubmissionComp } from "./RedditSubmission"
+////function displaySubreddit(subreddit: string) {
+////    let components = submissions
+////        .map((value, index) => </*2*/SubmissionComp key={ index } elementPosition= { index } {...value.data} />);
+////}
+
+// @Filename: RedditSubmission.ts
+////export const /*3*/SubmissionComp = (submission: SubmissionProps) =>
+////    <div style={{ fontFamily: "sans-serif" }}></div>;
+
+
+goTo.marker("1");
+verify.referencesCountIs(3);
+
+goTo.marker("2");
+verify.referencesCountIs(3);
+
+goTo.marker("3");
+verify.referencesCountIs(3);