Merge pull request #5184 from RyanCavanaugh/fix5096

Don't issue completion in JSX text

Author: RyanCavanaugh

src/harness/fourslash.ts

@@ -591,14 +591,21 @@ namespace FourSlash {
             }
         }
 
-        public verifyCompletionListItemsCountIsGreaterThan(count: number) {
+        public verifyCompletionListItemsCountIsGreaterThan(count: number, negative: boolean) {
             this.taoInvalidReason = "verifyCompletionListItemsCountIsGreaterThan NYI";
 
             let completions = this.getCompletionListAtCaret();
             let itemsCount = completions.entries.length;
 
-            if (itemsCount <= count) {
-                this.raiseError(`Expected completion list items count to be greater than ${count}, but is actually ${itemsCount}`);
+            if (negative) {
+                if (itemsCount > count) {
+                    this.raiseError(`Expected completion list items count to not be greater than ${count}, but is actually ${itemsCount}`);
+                }
+            }
+            else {
+                if (itemsCount <= count) {
+                    this.raiseError(`Expected completion list items count to be greater than ${count}, but is actually ${itemsCount}`);
+                }
             }
         }
 

src/services/services.ts

@@ -3112,6 +3112,7 @@ namespace ts {
             let node = currentToken;
             let isRightOfDot = false;
             let isRightOfOpenTag = false;
+            let isStartingCloseTag = false;
 
             let location = getTouchingPropertyName(sourceFile, position);
             if (contextToken) {
@@ -3137,9 +3138,14 @@ namespace ts {
                         return undefined;
                     }
                 }
-                else if (kind === SyntaxKind.LessThanToken && sourceFile.languageVariant === LanguageVariant.JSX) {
-                    isRightOfOpenTag = true;
-                    location = contextToken;
+                else if (sourceFile.languageVariant === LanguageVariant.JSX) {
+                    if (kind === SyntaxKind.LessThanToken) {
+                        isRightOfOpenTag = true;
+                        location = contextToken;
+                    }
+                    else if (kind === SyntaxKind.SlashToken && contextToken.parent.kind === SyntaxKind.JsxClosingElement) {
+                        isStartingCloseTag = true;
+                    }
                 }
             }
 
@@ -3162,6 +3168,13 @@ namespace ts {
                 isMemberCompletion = true;
                 isNewIdentifierLocation = false;
             }
+            else if (isStartingCloseTag) {
+                let tagName = (<JsxElement>contextToken.parent.parent).openingElement.tagName;
+                symbols = [typeChecker.getSymbolAtLocation(tagName)];
+
+                isMemberCompletion = true;
+                isNewIdentifierLocation = false;
+            }
             else {
                 // For JavaScript or TypeScript, if we're not after a dot, then just try to get the
                 // global symbols in scope.  These results should be valid for either language as
@@ -3318,11 +3331,29 @@ namespace ts {
                 let start = new Date().getTime();
                 let result = isInStringOrRegularExpressionOrTemplateLiteral(contextToken) ||
                     isSolelyIdentifierDefinitionLocation(contextToken) ||
-                    isDotOfNumericLiteral(contextToken);
+                    isDotOfNumericLiteral(contextToken) ||
+                    isInJsxText(contextToken);
                 log("getCompletionsAtPosition: isCompletionListBlocker: " + (new Date().getTime() - start));
                 return result;
             }
 
+            function isInJsxText(contextToken: Node): boolean {
+                if (contextToken.kind === SyntaxKind.JsxText) {
+                    return true;
+                }
+
+                if (contextToken.kind === SyntaxKind.GreaterThanToken && contextToken.parent) {
+                    if (contextToken.parent.kind === SyntaxKind.JsxOpeningElement) {
+                        return true;
+                    }
+
+                    if (contextToken.parent.kind === SyntaxKind.JsxClosingElement || contextToken.parent.kind === SyntaxKind.JsxSelfClosingElement) {
+                        return contextToken.parent.parent && contextToken.parent.parent.kind === SyntaxKind.JsxElement;
+                    }
+                }
+                return false;
+            }
+
             function isNewIdentifierDefinitionLocation(previousToken: Node): boolean {
                 if (previousToken) {
                     let containingNodeKind = previousToken.parent.kind;

tests/cases/fourslash/fourslash.ts

@@ -212,7 +212,7 @@ module FourSlashInterface {
         // Verifies the completion list items count to be greater than the specified amount. The
         // completion list is brought up if necessary
         public completionListItemsCountIsGreaterThan(count: number) {
-            FourSlash.currentTestState.verifyCompletionListItemsCountIsGreaterThan(count);
+            FourSlash.currentTestState.verifyCompletionListItemsCountIsGreaterThan(count, this.negative);
         }
 
         public completionListIsEmpty() {

tests/cases/fourslash/tsxCompletion10.ts

@@ -0,0 +1,14 @@
+/// <reference path='fourslash.ts' />
+
+//@Filename: file.tsx
+//// declare module JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////         div: { ONE: string; TWO: number; }
+////     }
+//// }
+//// var x1 = <div><//**/
+
+goTo.marker();
+verify.memberListCount(1);
+verify.completionListContains('div');

tests/cases/fourslash/tsxCompletion9.ts

@@ -0,0 +1,24 @@
+/// <reference path='fourslash.ts' />
+
+//@Filename: file.tsx
+//// declare module JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////         div: { ONE: string; TWO: number; }
+////     }
+//// }
+//// var x1 = <div> /*1*/ hello /*2*/ world /*3*/</div>;
+//// var x2 = <div> /*4*/ <div></div> /*5*/ world /*6*/</div>;
+//// var x3 = <div>/*7*/<div/>/*8*/world/*9*/</div>;
+//// var x4 = <div>/*10*/</div>;
+//// <div/>
+//// /*end*/
+//// 
+
+for (var i = 1; i <= 10; i++) {
+	goTo.marker(i + '');
+	verify.completionListIsEmpty();
+}
+
+goTo.marker('end');
+verify.not.completionListIsEmpty();