maxmustermann/TypeScript
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Handle jsx Opening, Closing and Self closing tags

Browse source
This commit is contained in:
Sheetal Nandi 2019-06-06 10:57:09 -07:00
parent edad317395
commit 768c9ed8d7
14 changed files with 55 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/services/findAllReferences.ts
View file

@ -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) ?

10
src/services/services.ts
View file

@ -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 },

6
tests/cases/fourslash/findReferencesJSXTagName.ts
View file

@ -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]);

12
tests/cases/fourslash/findReferencesJSXTagName3.ts
View file

@ -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];

2
tests/cases/fourslash/tsxFindAllReferences1.ts
View file

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

2
tests/cases/fourslash/tsxFindAllReferences4.ts
View file

@ -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");

10
tests/cases/fourslash/tsxFindAllReferences5.ts
View file

@ -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",

12
tests/cases/fourslash/tsxFindAllReferences8.ts
View file

@ -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)",

2
tests/cases/fourslash/tsxFindAllReferencesUnionElementType1.ts
View file

@ -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;

2
tests/cases/fourslash/tsxFindAllReferencesUnionElementType2.ts
View file

@ -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");

2
tests/cases/fourslash/tsxRename1.ts
View file

@ -11,5 +11,5 @@
//// span: { n: string; };
//// }
//// }
//// var x = <[|div|] />;
//// var x = [|<[|{| "declarationRangeIndex": 2 |}div|] />|];
verify.rangesWithSameTextAreRenameLocations("div");

6
tests/cases/fourslash/tsxRename4.ts
View file

@ -11,10 +11,10 @@
////}
////[|class [|{| "declarationRangeIndex": 0 |}MyClass|] {}|]
////
////<[|MyClass|]></[|MyClass|]>;
////<[|MyClass|]/>;
////[|<[|{| "declarationRangeIndex": 2 |}MyClass|]></[|{| "declarationRangeIndex": 2 |}MyClass|]>|];
////[|<[|{| "declarationRangeIndex": 5 |}MyClass|]/>|];
////
////<[|div|]> </[|div|]>
////[|<[|{| "declarationRangeIndex": 7 |}div|]> </[|{| "declarationRangeIndex": 7 |}div|]>|]
verify.noErrors();
verify.rangesWithSameTextAreRenameLocations("MyClass", "div");

10
tests/cases/fourslash/tsxRename6.ts
View file

@ -16,10 +16,10 @@
//// optional?: boolean
//// }
//// [|declare function [|{| "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.rangesWithSameTextAreRenameLocations("Opt");

12
tests/cases/fourslash/tsxRename9.ts
View file

@ -23,12 +23,12 @@
//// [|declare function [|{| "declarationRangeIndex": 4 |}MainButton|](buttonProps: ButtonProps): JSX.Element;|]
//// [|declare function [|{| "declarationRangeIndex": 6 |}MainButton|](linkProps: LinkProps): JSX.Element;|]
//// [|declare function [|{| "declarationRangeIndex": 8 |}MainButton|](props: ButtonProps | LinkProps): JSX.Element;|]
//// let opt = <[|MainButton|] />;
//// let opt = <[|MainButton|] children="chidlren" />;
//// let opt = <[|MainButton|] [|[|{| "declarationRangeIndex": 13 |}onClick|]={()=>{}}|] />;
//// let opt = <[|MainButton|] [|[|{| "declarationRangeIndex": 16 |}onClick|]={()=>{}}|] [|ignore-prop|] />;
//// let opt = <[|MainButton|] [|[|{| "declarationRangeIndex": 20 |}goTo|]="goTo"|] />;
//// let opt = <[|MainButton|] [|wrong|] />;
//// let opt = [|<[|{| "declarationRangeIndex": 10 |}MainButton|] />|];
//// let opt = [|<[|{| "declarationRangeIndex": 12 |}MainButton|] children="chidlren" />|];
//// let opt = [|<[|{| "declarationRangeIndex": 14 |}MainButton|] [|[|{| "declarationRangeIndex": 16 |}onClick|]={()=>{}}|] />|];
//// let opt = [|<[|{| "declarationRangeIndex": 18 |}MainButton|] [|[|{| "declarationRangeIndex": 20 |}onClick|]={()=>{}}|] [|ignore-prop|] />|];
//// let opt = [|<[|{| "declarationRangeIndex": 23 |}MainButton|] [|[|{| "declarationRangeIndex": 25 |}goTo|]="goTo"|] />|];
//// let opt = [|<[|{| "declarationRangeIndex": 27 |}MainButton|] [|wrong|] />|];
verify.rangesWithSameTextAreRenameLocations(
"onClick",