Handle jsx Opening, Closing and Self closing tags

Author: sheetalkamat

src/services/findAllReferences.ts

@@ -48,11 +48,17 @@ namespace ts.FindAllReferences {
             return getDeclarationForDeclarationSpan(node);
         }
 
-        // TODO(shkamat)::
-        // JSXOpeningElement or JSXElement for tagName ?
         if (!node.parent) return undefined;
 
         if (!isDeclaration(node.parent) && !isExportAssignment(node.parent)) {
+            // Jsx Tags
+            if (isJsxOpeningElement(node.parent) || isJsxClosingElement(node.parent)) {
+                return node.parent.parent;
+            }
+            else if (isJsxSelfClosingElement(node.parent)) {
+                return node.parent;
+            }
+
             // Special property assignment in javascript
             if (isInJSFile(node)) {
                 const binaryExpression = isBinaryExpression(node.parent) ?

src/services/services.ts

@@ -1577,8 +1577,14 @@ namespace ts {
             const node = getTouchingPropertyName(sourceFile, position);
             if (isIdentifier(node) && (isJsxOpeningElement(node.parent) || isJsxClosingElement(node.parent)) && isIntrinsicJsxName(node.escapedText)) {
                 const { openingElement, closingElement } = node.parent.parent;
-                return [openingElement, closingElement].map((node): RenameLocation =>
-                    ({ fileName: sourceFile.fileName, textSpan: createTextSpanFromNode(node.tagName, sourceFile) }));
+                return [openingElement, closingElement].map(node => {
+                    const result: RenameLocation = {
+                        fileName: sourceFile.fileName,
+                        textSpan: createTextSpanFromNode(node.tagName, sourceFile)
+                    };
+                    FindAllReferences.setDeclarationSpan(result, sourceFile, node.parent);
+                    return result;
+                });
             }
             else {
                 return getReferencesWorker(node, position, { findInStrings, findInComments, providePrefixAndSuffixTextForRename, isForRename: true },

tests/cases/fourslash/findReferencesJSXTagName.ts

@@ -4,14 +4,14 @@
 ////[|import { [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 0 |}SubmissionComp|] } from "./RedditSubmission"|]
 ////function displaySubreddit(subreddit: string) {
 ////    let components = submissions
-////        .map((value, index) => <[|SubmissionComp|] key={ index } elementPosition= { index } {...value.data} />);
+////        .map((value, index) => [|<[|{| "declarationRangeIndex": 2 |}SubmissionComp|] key={ index } elementPosition= { index } {...value.data} />|]);
 ////}
 
 // @Filename: RedditSubmission.ts
-////export const [|[|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 3 |}SubmissionComp|] = (submission: SubmissionProps) =>
+////export const [|[|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 4 |}SubmissionComp|] = (submission: SubmissionProps) =>
 ////    <div style|]={{ fontFamily: "sans-serif" }}></div>;
 
-const [r0Def, r0, r1, r2Def, r2] = test.ranges();
+const [r0Def, r0, r1Def, r1, r2Def, r2] = test.ranges();
 const imports = { definition: "(alias) const SubmissionComp: (submission: any) => any\nimport SubmissionComp", ranges: [r0, r1] };
 const def = { definition: "const SubmissionComp: (submission: any) => any", ranges: [r2] };
 verify.referenceGroups([r0, r1], [imports, def]);

tests/cases/fourslash/findReferencesJSXTagName3.ts

@@ -11,16 +11,16 @@
 ////}
 ////
 ////[|const [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 2 |}Comp|] = () =>
-////    <[|div|]>
+////    [|<[|{| "declarationRangeIndex": 4 |}div|]>
 ////        Some content
-////        <[|div|]>More content</[|div|]>
-////    </[|div|]>;|]
+////        [|<[|{| "declarationRangeIndex": 6 |}div|]>More content</[|{| "declarationRangeIndex": 6 |}div|]>|]
+////    </[|{| "declarationRangeIndex": 4 |}div|]>|];|]
 ////
-////const x = <[|Comp|]>
+////const x = [|<[|{| "declarationRangeIndex": 10 |}Comp|]>
 ////    Content
-////</[|Comp|]>;
+////</[|{| "declarationRangeIndex": 10 |}Comp|]>|];
 
-const [d0Def, d0, c0Def, c0, d1, d2, d3, d4, c1, c2] = test.ranges();
+const [d0Def, d0, c0Def, c0, d1Def, d1, d2Def, d2, d3, d4, c1Def, c1, c2] = test.ranges();
 
 const allD = [d0, d1, d2, d3, d4];
 const allC = [c0, c1, c2];

tests/cases/fourslash/tsxFindAllReferences1.ts

@@ -11,7 +11,7 @@
 ////         span: { n: string; };
 ////     }
 //// }
-//// var x = <[|div|] />;
+//// var x = [|<[|{| "declarationRangeIndex": 2 |}div|] />|];
 
 verify.singleReferenceGroup(
     `(property) JSX.IntrinsicElements.div: {

tests/cases/fourslash/tsxFindAllReferences4.ts

@@ -14,6 +14,6 @@
 //// }|]
 ////
 ////
-//// var x = <[|MyClass|] name='hello'></[|MyClass|]>;
+//// var x = [|<[|{| "declarationRangeIndex" : 2 |}MyClass|] name='hello'></[|{| "declarationRangeIndex" : 2 |}MyClass|]>|];
 
 verify.singleReferenceGroup("class MyClass", "MyClass");

tests/cases/fourslash/tsxFindAllReferences5.ts

@@ -16,11 +16,11 @@
 ////     optional?: boolean
 //// }
 //// [|declare function [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 0 |}Opt|](attributes: OptionPropBag): JSX.Element;|]
-//// let opt = <[|Opt|] />;
-//// let opt1 = <[|Opt|] propx={100} propString />;
-//// let opt2 = <[|Opt|] propx={100} optional/>;
-//// let opt3 = <[|Opt|] wrong />;
-//// let opt4 = <[|Opt|] propx={100} propString="hi" />;
+//// let opt = [|<[|{| "declarationRangeIndex": 2 |}Opt|] />|];
+//// let opt1 = [|<[|{| "declarationRangeIndex": 4 |}Opt|] propx={100} propString />|];
+//// let opt2 = [|<[|{| "declarationRangeIndex": 6 |}Opt|] propx={100} optional/>|];
+//// let opt3 = [|<[|{| "declarationRangeIndex": 8 |}Opt|] wrong />|];
+//// let opt4 = [|<[|{| "declarationRangeIndex": 10 |}Opt|] propx={100} propString="hi" />|];
 
 verify.singleReferenceGroup(
     "function Opt(attributes: OptionPropBag): JSX.Element",

tests/cases/fourslash/tsxFindAllReferences8.ts

@@ -23,12 +23,12 @@
 //// [|declare function [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 0 |}MainButton|](buttonProps: ButtonProps): JSX.Element;|]
 //// [|declare function [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 2 |}MainButton|](linkProps: LinkProps): JSX.Element;|]
 //// [|declare function [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 4 |}MainButton|](props: ButtonProps | LinkProps): JSX.Element;|]
-//// let opt = <[|MainButton|] />;
-//// let opt = <[|MainButton|] children="chidlren" />;
-//// let opt = <[|MainButton|] onClick={()=>{}} />;
-//// let opt = <[|MainButton|] onClick={()=>{}} ignore-prop />;
-//// let opt = <[|MainButton|] goTo="goTo" />;
-//// let opt = <[|MainButton|] wrong />;
+//// let opt = [|<[|{| "declarationRangeIndex": 6 |}MainButton|] />|];
+//// let opt = [|<[|{| "declarationRangeIndex": 8 |}MainButton|] children="chidlren" />|];
+//// let opt = [|<[|{| "declarationRangeIndex": 10 |}MainButton|] onClick={()=>{}} />|];
+//// let opt = [|<[|{| "declarationRangeIndex": 12 |}MainButton|] onClick={()=>{}} ignore-prop />|];
+//// let opt = [|<[|{| "declarationRangeIndex": 14 |}MainButton|] goTo="goTo" />|];
+//// let opt = [|<[|{| "declarationRangeIndex": 16 |}MainButton|] wrong />|];
 
 verify.singleReferenceGroup(
     "function MainButton(buttonProps: ButtonProps): JSX.Element (+2 overloads)",

tests/cases/fourslash/tsxFindAllReferencesUnionElementType1.ts

@@ -19,7 +19,7 @@
 //// }
 
 //// [|var [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 0 |}SFCComp|] = SFC1 || SFC2;|]
-//// <[|SFCComp|] x={ "hi" } />
+//// [|<[|{| "declarationRangeIndex": 2 |}SFCComp|] x={ "hi" } />|]
 
 verify.singleReferenceGroup(`var SFCComp: ((prop: {
     x: number;

tests/cases/fourslash/tsxFindAllReferencesUnionElementType2.ts

@@ -18,6 +18,6 @@
 //// }
 
 //// [|var [|{| "isWriteAccess": true, "isDefinition": true, "declarationRangeIndex": 0 |}RCComp|] = RC1 || RC2;|]
-//// <[|RCComp|] />
+//// [|<[|{| "declarationRangeIndex": 2 |}RCComp|] />|]
 
 verify.singleReferenceGroup("var RCComp: typeof RC1", "RCComp");