diff --git a/src/services/services.ts b/src/services/services.ts index e8a3cb5958a..b3eb58bdcb3 100644 --- a/src/services/services.ts +++ b/src/services/services.ts @@ -3011,6 +3011,7 @@ namespace ts { function tryGetGlobalSymbols(): boolean { let objectLikeContainer = tryGetObjectLikeCompletionContainer(contextToken); + let jsxContainer = tryGetContainingJsxElement(contextToken); if (objectLikeContainer) { // Object literal expression, look up possible property names from contextual type isMemberCompletion = true; @@ -3061,30 +3062,19 @@ namespace ts { } return true; } - else if (getAncestor(contextToken, SyntaxKind.JsxElement) || getAncestor(contextToken, SyntaxKind.JsxSelfClosingElement)) { - // Go up until we hit either the element or expression - let jsxNode = contextToken; + else if(jsxContainer) { + let attrsType: Type; + if ((jsxContainer.kind === SyntaxKind.JsxSelfClosingElement) || (jsxContainer.kind === SyntaxKind.JsxOpeningElement)) { + // Cursor is inside a JSX self-closing element or opening element + attrsType = typeChecker.getJsxElementAttributesType(jsxContainer); - while (jsxNode) { - if (jsxNode.kind === SyntaxKind.JsxExpression) { - // Defer to global completion if we're inside an {expression} - break; - } else if (jsxNode.kind === SyntaxKind.JsxSelfClosingElement || jsxNode.kind === SyntaxKind.JsxElement) { - let attrsType: Type; - if (jsxNode.kind === SyntaxKind.JsxSelfClosingElement) { - // Cursor is inside a JSX self-closing element - attrsType = typeChecker.getJsxElementAttributesType(jsxNode); - } - else { - Debug.assert(jsxNode.kind === SyntaxKind.JsxElement); - // Cursor is inside a JSX element - attrsType = typeChecker.getJsxElementAttributesType((jsxNode).openingElement); - } - symbols = typeChecker.getPropertiesOfType(attrsType); + if (attrsType) { + symbols = filterJsxAttributes((jsxContainer).attributes, typeChecker.getPropertiesOfType(attrsType)); isMemberCompletion = true; + isNewIdentifierLocation = false; return true; } - jsxNode = jsxNode.parent; + } } @@ -3270,6 +3260,36 @@ namespace ts { return undefined; } + function tryGetContainingJsxElement(contextToken: Node): JsxOpeningLikeElement { + if (contextToken) { + let parent = contextToken.parent; + switch(contextToken.kind) { + case SyntaxKind.LessThanSlashToken: + case SyntaxKind.SlashToken: + case SyntaxKind.Identifier: + if(parent && (parent.kind === SyntaxKind.JsxSelfClosingElement || parent.kind === SyntaxKind.JsxOpeningElement)) { + return parent; + } + break; + + case SyntaxKind.CloseBraceToken: + // The context token is the closing } of an attribute, which means + // its parent is a JsxExpression, whose parent is a JsxAttribute, + // whose parent is a JsxOpeningLikeElement + if(parent && + parent.kind === SyntaxKind.JsxExpression && + parent.parent && + parent.parent.kind === SyntaxKind.JsxAttribute) { + + return parent.parent.parent; + } + + break; + } + } + return undefined; + } + function isFunction(kind: SyntaxKind): boolean { switch (kind) { case SyntaxKind.FunctionExpression: @@ -3455,6 +3475,22 @@ namespace ts { } } + function filterJsxAttributes(attributes: NodeArray, symbols: Symbol[]): Symbol[] { + let seenNames: Map = {}; + for(let attr of attributes) { + if(attr.kind === SyntaxKind.JsxAttribute) { + seenNames[(attr).name.text] = true; + } + } + let result: Symbol[] = []; + for(let sym of symbols) { + if(!seenNames[sym.name]) { + result.push(sym); + } + } + return result; + } + function getCompletionsAtPosition(fileName: string, position: number): CompletionInfo { synchronizeHostData(); diff --git a/tests/cases/fourslash/incrementalParsingInsertIntoMethod1.ts b/tests/cases/fourslash/incrementalParsingInsertIntoMethod1.ts index 930c0511ffb..b5deb361056 100644 --- a/tests/cases/fourslash/incrementalParsingInsertIntoMethod1.ts +++ b/tests/cases/fourslash/incrementalParsingInsertIntoMethod1.ts @@ -8,6 +8,5 @@ //// public foo3() { } ////} -debugger; goTo.marker("1"); edit.insert(" + 1"); \ No newline at end of file diff --git a/tests/cases/fourslash/syntacticClassificationsConflictMarkers1.ts b/tests/cases/fourslash/syntacticClassificationsConflictMarkers1.ts index e381856c41e..7f26038c33e 100644 --- a/tests/cases/fourslash/syntacticClassificationsConflictMarkers1.ts +++ b/tests/cases/fourslash/syntacticClassificationsConflictMarkers1.ts @@ -7,7 +7,7 @@ //// v = 2; ////>>>>>>> Branch - a ////} -debugger; + var c = classification; verify.syntacticClassificationsAre( c.keyword("class"), c.className("C"), c.punctuation("{"), diff --git a/tests/cases/fourslash/tsxCompletion3.ts b/tests/cases/fourslash/tsxCompletion3.ts new file mode 100644 index 00000000000..5ee712f7e96 --- /dev/null +++ b/tests/cases/fourslash/tsxCompletion3.ts @@ -0,0 +1,14 @@ +/// + +//@Filename: file.tsx +//// declare module JSX { +//// interface Element { } +//// interface IntrinsicElements { +//// div: { one; two; } +//// } +//// } +////
; + +goTo.marker(); +verify.completionListContains('two'); +verify.not.completionListContains('one');