Cherry-pick PR #47096 into release-4.5 (#47105)

Component commits:
191aa682f8 Disable JSX attribute snippet if attribute is acutally the HTML tag

1786d5e278 Add more tests of text before and after

7ac5e596ce Big comment

Co-authored-by: Jake Bailey <5341706+jakebailey@users.noreply.github.com>
This commit is contained in:
TypeScript Bot
2021-12-10 15:47:23 -08:00
committed by GitHub
co-authored by Jake Bailey
parent 002c79bf50
commit 1d4ec40130
2 changed files with 79 additions and 1 deletions
+18 -1
View File
@@ -713,8 +713,25 @@ namespace ts.Completions {
}
}
// Before offering up a JSX attribute snippet, ensure that we aren't potentially completing
// a tag name; this may appear as an attribute after the "<" when the tag has not yet been
// closed, as in:
//
// return <>
// foo <butto|
// </>
//
// We can detect this case by checking if both:
//
// 1. The location is "<", so we are completing immediately after it.
// 2. The "<" has the same position as its parent, so is not a binary expression.
const kind = SymbolDisplay.getSymbolKind(typeChecker, symbol, location);
if (kind === ScriptElementKind.jsxAttribute && preferences.includeCompletionsWithSnippetText && preferences.jsxAttributeCompletionStyle && preferences.jsxAttributeCompletionStyle !== "none") {
if (
kind === ScriptElementKind.jsxAttribute
&& (location.kind !== SyntaxKind.LessThanToken || location.pos !== location.parent.pos)
&& preferences.includeCompletionsWithSnippetText
&& preferences.jsxAttributeCompletionStyle
&& preferences.jsxAttributeCompletionStyle !== "none") {
let useBraces = preferences.jsxAttributeCompletionStyle === "braces";
const type = typeChecker.getTypeOfSymbolAtLocation(symbol, location);
@@ -0,0 +1,61 @@
/// <reference path="fourslash.ts" />
//@Filename: file.tsx
////declare namespace JSX {
//// interface IntrinsicElements {
//// button: any;
//// div: any;
//// }
////}
////function fn() {
//// return <>
//// <butto/*1*/
//// </>;
////}
////function fn2() {
//// return <>
//// preceding junk <butto/*2*/
//// </>;
////}
////function fn3() {
//// return <>
//// <butto/*3*/ style=""
//// </>;
////}
verify.completions(
{
marker: "1",
includes: [
{ name: "button", insertText: undefined, isSnippet: undefined }
],
preferences: {
jsxAttributeCompletionStyle: "braces",
includeCompletionsWithSnippetText: true,
includeCompletionsWithInsertText: true,
}
},
{
marker: "2",
includes: [
{ name: "button", insertText: undefined, isSnippet: undefined }
],
preferences: {
jsxAttributeCompletionStyle: "braces",
includeCompletionsWithSnippetText: true,
includeCompletionsWithInsertText: true,
}
},
{
marker: "3",
includes: [
{ name: "button", insertText: undefined, isSnippet: undefined }
],
preferences: {
jsxAttributeCompletionStyle: "braces",
includeCompletionsWithSnippetText: true,
includeCompletionsWithInsertText: true,
}
},
);