Added Jsx completion feature and tests

Armando Aguirre · Armando Aguirre · commit 318b59f1f61a · 2021-09-15T21:29:18.000-07:00
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
@@ -8547,6 +8547,7 @@ namespace ts {
         readonly providePrefixAndSuffixTextForRename?: boolean;
         readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
         readonly provideRefactorNotApplicableReason?: boolean;
+        readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
     }
 
     /** Represents a bigint literal value without requiring bigint support */
diff --git a/src/server/protocol.ts b/src/server/protocol.ts
@@ -3391,6 +3391,7 @@ namespace ts.server.protocol {
         readonly provideRefactorNotApplicableReason?: boolean;
         readonly allowRenameOfImportPath?: boolean;
         readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
+        readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
 
         readonly displayPartsForJSDoc?: boolean;
         readonly generateReturnInDocTemplate?: boolean;
diff --git a/src/services/completions.ts b/src/services/completions.ts
@@ -675,6 +675,37 @@ namespace ts.Completions {
             hasAction = !importCompletionNode;
         }
 
+        const kind = SymbolDisplay.getSymbolKind(typeChecker, symbol, location); // TODO: GH#18217
+        if (kind === ScriptElementKind.jsxAttribute && preferences.jsxSnippetCompletion && preferences.jsxSnippetCompletion !== "none") {
+            let useBraces = preferences.jsxSnippetCompletion === "braces";
+            const type = typeChecker.getTypeOfSymbolAtLocation(symbol, location);
+
+            // If is boolean like or undefined, don't return a snippet we want just to return the completion.
+            if (preferences.jsxSnippetCompletion === "auto"
+                && !(type.flags & TypeFlags.BooleanLike)
+                && !(type.flags & TypeFlags.Union && every((type as UnionType).types, type => !!(type.flags & (TypeFlags.BooleanLike | TypeFlags.Undefined))))
+            ) {
+                if (type.flags & TypeFlags.StringLike || (type.flags & TypeFlags.Union && every((type as UnionType).types, type => !!(type.flags & (TypeFlags.StringLike | TypeFlags.Undefined))))) {
+                    // If is string like or undefined use quotes
+                    insertText = `${name}=${quote(sourceFile, preferences, "$1")}`;
+                    isSnippet = true;
+                }
+                else {
+                    // Use braces for everything else
+                    useBraces = true;
+                }
+            }
+
+            if (useBraces) {
+                insertText = `${name}={$1}`;
+                isSnippet = true;
+            }
+
+            if (isSnippet) {
+                replacementSpan = createTextSpanFromNode(location, sourceFile);
+            }
+        }
+
         // TODO(drosen): Right now we just permit *all* semantic meanings when calling
         // 'getSymbolKind' which is permissible given that it is backwards compatible; but
         // really we should consider passing the meaning for the node so that we don't report
@@ -685,7 +716,7 @@ namespace ts.Completions {
         // entries (like JavaScript identifier entries).
         return {
             name,
-            kind: SymbolDisplay.getSymbolKind(typeChecker, symbol, location), // TODO: GH#18217
+            kind,
             kindModifiers: SymbolDisplay.getSymbolModifiers(typeChecker, symbol),
             sortText,
             source: getSourceFromOrigin(origin),
diff --git a/tests/baselines/reference/api/tsserverlibrary.d.ts b/tests/baselines/reference/api/tsserverlibrary.d.ts
@@ -3995,6 +3995,7 @@ declare namespace ts {
         readonly providePrefixAndSuffixTextForRename?: boolean;
         readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
         readonly provideRefactorNotApplicableReason?: boolean;
+        readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
     }
     /** Represents a bigint literal value without requiring bigint support */
     export interface PseudoBigInt {
@@ -9458,6 +9459,7 @@ declare namespace ts.server.protocol {
         readonly provideRefactorNotApplicableReason?: boolean;
         readonly allowRenameOfImportPath?: boolean;
         readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
+        readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
         readonly displayPartsForJSDoc?: boolean;
         readonly generateReturnInDocTemplate?: boolean;
     }
diff --git a/tests/baselines/reference/api/typescript.d.ts b/tests/baselines/reference/api/typescript.d.ts
@@ -3995,6 +3995,7 @@ declare namespace ts {
         readonly providePrefixAndSuffixTextForRename?: boolean;
         readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
         readonly provideRefactorNotApplicableReason?: boolean;
+        readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
     }
     /** Represents a bigint literal value without requiring bigint support */
     export interface PseudoBigInt {
diff --git a/tests/cases/fourslash/fourslash.ts b/tests/cases/fourslash/fourslash.ts
@@ -658,6 +658,7 @@ declare namespace FourSlashInterface {
         readonly includeAutomaticOptionalChainCompletions?: boolean;
         readonly importModuleSpecifierPreference?: "shortest" | "project-relative" | "relative" | "non-relative";
         readonly importModuleSpecifierEnding?: "minimal" | "index" | "js";
+        readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
     }
     interface InlayHintsOptions extends UserPreferences {
         readonly includeInlayParameterNameHints?: "none" | "literals" | "all";
diff --git a/tests/cases/fourslash/jsxAttributeSnippetCompletionAuto.ts b/tests/cases/fourslash/jsxAttributeSnippetCompletionAuto.ts
@@ -0,0 +1,88 @@
+/// <reference path="fourslash.ts" />
+
+// @Filename: foo.tsx
+//// declare namespace JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////         foo: {
+////             prop_a: boolean;
+////             prop_b: string;
+////             prop_c: any;
+////             prop_d: { p1: string; }
+////             prop_e: string | undefined;
+////             prop_f: boolean | undefined;
+////             prop_g: { p1: string; } | undefined;
+////             prop_h?: string;
+////             prop_i?: boolean;
+////             prop_j?: { p1: string; };
+////         }
+////     }
+//// }
+//// 
+//// <foo [|prop_/**/|] />
+
+verify.completions({
+    marker: "",
+    exact: [
+        {
+            name: "prop_a",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_b",
+            insertText: "prop_b=\"$1\"",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_c",
+            insertText: "prop_c={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_d",
+            insertText: "prop_d={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_e",
+            insertText: "prop_e=\"$1\"",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_f",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_g",
+            insertText: "prop_g={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_h",
+            insertText: "prop_h=\"$1\"",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+            sortText: completion.SortText.OptionalMember,
+        },
+        {
+            name: "prop_i",
+            isSnippet: undefined,
+            sortText: completion.SortText.OptionalMember,
+        },
+        {
+            name: "prop_j",
+            insertText: "prop_j={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+            sortText: completion.SortText.OptionalMember,
+        }
+    ],
+    preferences: {
+        jsxSnippetCompletion: "auto"
+    }
+});
diff --git a/tests/cases/fourslash/jsxAttributeSnippetCompletionBraces.ts b/tests/cases/fourslash/jsxAttributeSnippetCompletionBraces.ts
@@ -0,0 +1,94 @@
+/// <reference path="fourslash.ts" />
+
+// @Filename: foo.tsx
+//// declare namespace JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////         foo: {
+////             prop_a: boolean;
+////             prop_b: string;
+////             prop_c: any;
+////             prop_d: { p1: string; }
+////             prop_e: string | undefined;
+////             prop_f: boolean | undefined;
+////             prop_g: { p1: string; } | undefined;
+////             prop_h?: string;
+////             prop_i?: boolean;
+////             prop_j?: { p1: string; };
+////         }
+////     }
+//// }
+//// 
+//// <foo [|prop_/**/|] />
+
+verify.completions({
+    marker: "",
+    exact: [
+        {
+            name: "prop_a",
+            insertText: "prop_a={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_b",
+            insertText: "prop_b={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_c",
+            insertText: "prop_c={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_d",
+            insertText: "prop_d={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_e",
+            insertText: "prop_e={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_f",
+            insertText: "prop_f={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_g",
+            insertText: "prop_g={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+        },
+        {
+            name: "prop_h",
+            insertText: "prop_h={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+            sortText: completion.SortText.OptionalMember,
+        },
+        {
+            name: "prop_i",
+            insertText: "prop_i={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+            sortText: completion.SortText.OptionalMember,
+        },
+        {
+            name: "prop_j",
+            insertText: "prop_j={$1}",
+            replacementSpan: test.ranges()[0],
+            isSnippet: true,
+            sortText: completion.SortText.OptionalMember,
+        }
+    ],
+    preferences: {
+        jsxSnippetCompletion: "braces"
+    }
+});
diff --git a/tests/cases/fourslash/jsxAttributeSnippetCompletionDefault.ts b/tests/cases/fourslash/jsxAttributeSnippetCompletionDefault.ts
@@ -0,0 +1,74 @@
+/// <reference path="fourslash.ts" />
+
+// @Filename: foo.tsx
+//// declare namespace JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////         foo: {
+////             prop_a: boolean;
+////             prop_b: string;
+////             prop_c: any;
+////             prop_d: { p1: string; }
+////             prop_e: string | undefined;
+////             prop_f: boolean | undefined;
+////             prop_g: { p1: string; } | undefined;
+////             prop_h?: string;
+////             prop_i?: boolean;
+////             prop_j?: { p1: string; };
+////         }
+////     }
+//// }
+//// 
+//// <foo [|prop_/**/|] />
+
+verify.completions({
+    marker: "",
+    exact: [
+        {
+            name: "prop_a",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_b",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_c",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_d",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_e",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_f",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_g",
+            isSnippet: undefined,
+        },
+        {
+            name: "prop_h",
+            isSnippet: undefined,
+            sortText: completion.SortText.OptionalMember,
+        },
+        {
+            name: "prop_i",
+            isSnippet: undefined,
+            sortText: completion.SortText.OptionalMember,
+        },
+        {
+            name: "prop_j",
+            isSnippet: undefined,
+            sortText: completion.SortText.OptionalMember,
+        }
+    ],
+    preferences: {
+        jsxSnippetCompletion: undefined
+    }
+});
diff --git a/tests/cases/fourslash/jsxAttributeSnippetCompletionNone.ts b/tests/cases/fourslash/jsxAttributeSnippetCompletionNone.ts

Original file line number	Diff line number	Diff line change
`@@ -8547,6 +8547,7 @@ namespace ts {`
`8547`	`8547`	`readonly providePrefixAndSuffixTextForRename?: boolean;`
`8548`	`8548`	`readonly includePackageJsonAutoImports?: "auto" \| "on" \| "off";`
`8549`	`8549`	`readonly provideRefactorNotApplicableReason?: boolean;`
	`8550`	`+ readonly jsxSnippetCompletion?: "auto" \| "braces" \| "none";`
`8550`	`8551`	`}`
`8551`	`8552`
`8552`	`8553`	`/** Represents a bigint literal value without requiring bigint support */`
Original file line number	Diff line number	Diff line change
`@@ -3995,6 +3995,7 @@ declare namespace ts {`
`3995`	`3995`	`readonly providePrefixAndSuffixTextForRename?: boolean;`
`3996`	`3996`	`readonly includePackageJsonAutoImports?: "auto" \| "on" \| "off";`
`3997`	`3997`	`readonly provideRefactorNotApplicableReason?: boolean;`
	`3998`	`+ readonly jsxSnippetCompletion?: "auto" \| "braces" \| "none";`
`3998`	`3999`	`}`
`3999`	`4000`	`/** Represents a bigint literal value without requiring bigint support */`
`4000`	`4001`	`export interface PseudoBigInt {`
Original file line number	Diff line number	Diff line change
`@@ -658,6 +658,7 @@ declare namespace FourSlashInterface {`
`658`	`658`	`readonly includeAutomaticOptionalChainCompletions?: boolean;`
`659`	`659`	`readonly importModuleSpecifierPreference?: "shortest" \| "project-relative" \| "relative" \| "non-relative";`
`660`	`660`	`readonly importModuleSpecifierEnding?: "minimal" \| "index" \| "js";`
	`661`	`+ readonly jsxSnippetCompletion?: "auto" \| "braces" \| "none";`
`661`	`662`	`}`
`662`	`663`	`interface InlayHintsOptions extends UserPreferences {`
`663`	`664`	`readonly includeInlayParameterNameHints?: "none" \| "literals" \| "all";`