Skip to content

Commit 318b59f

Browse files
author
Armando Aguirre
committed
Added Jsx completion feature and tests
1 parent cdd9314 commit 318b59f

10 files changed

Lines changed: 368 additions & 1 deletion

‎src/compiler/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8547,6 +8547,7 @@ namespace ts {
85478547
readonly providePrefixAndSuffixTextForRename?: boolean;
85488548
readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
85498549
readonly provideRefactorNotApplicableReason?: boolean;
8550+
readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
85508551
}
85518552

85528553
/** Represents a bigint literal value without requiring bigint support */

‎src/server/protocol.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3391,6 +3391,7 @@ namespace ts.server.protocol {
33913391
readonly provideRefactorNotApplicableReason?: boolean;
33923392
readonly allowRenameOfImportPath?: boolean;
33933393
readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
3394+
readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
33943395

33953396
readonly displayPartsForJSDoc?: boolean;
33963397
readonly generateReturnInDocTemplate?: boolean;

‎src/services/completions.ts‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -675,6 +675,37 @@ namespace ts.Completions {
675675
hasAction = !importCompletionNode;
676676
}
677677

678+
const kind = SymbolDisplay.getSymbolKind(typeChecker, symbol, location); // TODO: GH#18217
679+
if (kind === ScriptElementKind.jsxAttribute && preferences.jsxSnippetCompletion && preferences.jsxSnippetCompletion !== "none") {
680+
let useBraces = preferences.jsxSnippetCompletion === "braces";
681+
const type = typeChecker.getTypeOfSymbolAtLocation(symbol, location);
682+
683+
// If is boolean like or undefined, don't return a snippet we want just to return the completion.
684+
if (preferences.jsxSnippetCompletion === "auto"
685+
&& !(type.flags & TypeFlags.BooleanLike)
686+
&& !(type.flags & TypeFlags.Union && every((type as UnionType).types, type => !!(type.flags & (TypeFlags.BooleanLike | TypeFlags.Undefined))))
687+
) {
688+
if (type.flags & TypeFlags.StringLike || (type.flags & TypeFlags.Union && every((type as UnionType).types, type => !!(type.flags & (TypeFlags.StringLike | TypeFlags.Undefined))))) {
689+
// If is string like or undefined use quotes
690+
insertText = `${name}=${quote(sourceFile, preferences, "$1")}`;
691+
isSnippet = true;
692+
}
693+
else {
694+
// Use braces for everything else
695+
useBraces = true;
696+
}
697+
}
698+
699+
if (useBraces) {
700+
insertText = `${name}={$1}`;
701+
isSnippet = true;
702+
}
703+
704+
if (isSnippet) {
705+
replacementSpan = createTextSpanFromNode(location, sourceFile);
706+
}
707+
}
708+
678709
// TODO(drosen): Right now we just permit *all* semantic meanings when calling
679710
// 'getSymbolKind' which is permissible given that it is backwards compatible; but
680711
// really we should consider passing the meaning for the node so that we don't report
@@ -685,7 +716,7 @@ namespace ts.Completions {
685716
// entries (like JavaScript identifier entries).
686717
return {
687718
name,
688-
kind: SymbolDisplay.getSymbolKind(typeChecker, symbol, location), // TODO: GH#18217
719+
kind,
689720
kindModifiers: SymbolDisplay.getSymbolModifiers(typeChecker, symbol),
690721
sortText,
691722
source: getSourceFromOrigin(origin),

‎tests/baselines/reference/api/tsserverlibrary.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3995,6 +3995,7 @@ declare namespace ts {
39953995
readonly providePrefixAndSuffixTextForRename?: boolean;
39963996
readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
39973997
readonly provideRefactorNotApplicableReason?: boolean;
3998+
readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
39983999
}
39994000
/** Represents a bigint literal value without requiring bigint support */
40004001
export interface PseudoBigInt {
@@ -9458,6 +9459,7 @@ declare namespace ts.server.protocol {
94589459
readonly provideRefactorNotApplicableReason?: boolean;
94599460
readonly allowRenameOfImportPath?: boolean;
94609461
readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
9462+
readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
94619463
readonly displayPartsForJSDoc?: boolean;
94629464
readonly generateReturnInDocTemplate?: boolean;
94639465
}

‎tests/baselines/reference/api/typescript.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3995,6 +3995,7 @@ declare namespace ts {
39953995
readonly providePrefixAndSuffixTextForRename?: boolean;
39963996
readonly includePackageJsonAutoImports?: "auto" | "on" | "off";
39973997
readonly provideRefactorNotApplicableReason?: boolean;
3998+
readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
39983999
}
39994000
/** Represents a bigint literal value without requiring bigint support */
40004001
export interface PseudoBigInt {

‎tests/cases/fourslash/fourslash.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -658,6 +658,7 @@ declare namespace FourSlashInterface {
658658
readonly includeAutomaticOptionalChainCompletions?: boolean;
659659
readonly importModuleSpecifierPreference?: "shortest" | "project-relative" | "relative" | "non-relative";
660660
readonly importModuleSpecifierEnding?: "minimal" | "index" | "js";
661+
readonly jsxSnippetCompletion?: "auto" | "braces" | "none";
661662
}
662663
interface InlayHintsOptions extends UserPreferences {
663664
readonly includeInlayParameterNameHints?: "none" | "literals" | "all";

‎tests/cases/fourslash/jsxAttributeSnippetCompletionAuto.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/// <reference path="fourslash.ts" />
2+
3+
// @Filename: foo.tsx
4+
//// declare namespace JSX {
5+
//// interface Element { }
6+
//// interface IntrinsicElements {
7+
//// foo: {
8+
//// prop_a: boolean;
9+
//// prop_b: string;
10+
//// prop_c: any;
11+
//// prop_d: { p1: string; }
12+
//// prop_e: string | undefined;
13+
//// prop_f: boolean | undefined;
14+
//// prop_g: { p1: string; } | undefined;
15+
//// prop_h?: string;
16+
//// prop_i?: boolean;
17+
//// prop_j?: { p1: string; };
18+
//// }
19+
//// }
20+
//// }
21+
////
22+
//// <foo [|prop_/**/|] />
23+
24+
verify.completions({
25+
marker: "",
26+
exact: [
27+
{
28+
name: "prop_a",
29+
isSnippet: undefined,
30+
},
31+
{
32+
name: "prop_b",
33+
insertText: "prop_b=\"$1\"",
34+
replacementSpan: test.ranges()[0],
35+
isSnippet: true,
36+
},
37+
{
38+
name: "prop_c",
39+
insertText: "prop_c={$1}",
40+
replacementSpan: test.ranges()[0],
41+
isSnippet: true,
42+
},
43+
{
44+
name: "prop_d",
45+
insertText: "prop_d={$1}",
46+
replacementSpan: test.ranges()[0],
47+
isSnippet: true,
48+
},
49+
{
50+
name: "prop_e",
51+
insertText: "prop_e=\"$1\"",
52+
replacementSpan: test.ranges()[0],
53+
isSnippet: true,
54+
},
55+
{
56+
name: "prop_f",
57+
isSnippet: undefined,
58+
},
59+
{
60+
name: "prop_g",
61+
insertText: "prop_g={$1}",
62+
replacementSpan: test.ranges()[0],
63+
isSnippet: true,
64+
},
65+
{
66+
name: "prop_h",
67+
insertText: "prop_h=\"$1\"",
68+
replacementSpan: test.ranges()[0],
69+
isSnippet: true,
70+
sortText: completion.SortText.OptionalMember,
71+
},
72+
{
73+
name: "prop_i",
74+
isSnippet: undefined,
75+
sortText: completion.SortText.OptionalMember,
76+
},
77+
{
78+
name: "prop_j",
79+
insertText: "prop_j={$1}",
80+
replacementSpan: test.ranges()[0],
81+
isSnippet: true,
82+
sortText: completion.SortText.OptionalMember,
83+
}
84+
],
85+
preferences: {
86+
jsxSnippetCompletion: "auto"
87+
}
88+
});

‎tests/cases/fourslash/jsxAttributeSnippetCompletionBraces.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/// <reference path="fourslash.ts" />
2+
3+
// @Filename: foo.tsx
4+
//// declare namespace JSX {
5+
//// interface Element { }
6+
//// interface IntrinsicElements {
7+
//// foo: {
8+
//// prop_a: boolean;
9+
//// prop_b: string;
10+
//// prop_c: any;
11+
//// prop_d: { p1: string; }
12+
//// prop_e: string | undefined;
13+
//// prop_f: boolean | undefined;
14+
//// prop_g: { p1: string; } | undefined;
15+
//// prop_h?: string;
16+
//// prop_i?: boolean;
17+
//// prop_j?: { p1: string; };
18+
//// }
19+
//// }
20+
//// }
21+
////
22+
//// <foo [|prop_/**/|] />
23+
24+
verify.completions({
25+
marker: "",
26+
exact: [
27+
{
28+
name: "prop_a",
29+
insertText: "prop_a={$1}",
30+
replacementSpan: test.ranges()[0],
31+
isSnippet: true,
32+
},
33+
{
34+
name: "prop_b",
35+
insertText: "prop_b={$1}",
36+
replacementSpan: test.ranges()[0],
37+
isSnippet: true,
38+
},
39+
{
40+
name: "prop_c",
41+
insertText: "prop_c={$1}",
42+
replacementSpan: test.ranges()[0],
43+
isSnippet: true,
44+
},
45+
{
46+
name: "prop_d",
47+
insertText: "prop_d={$1}",
48+
replacementSpan: test.ranges()[0],
49+
isSnippet: true,
50+
},
51+
{
52+
name: "prop_e",
53+
insertText: "prop_e={$1}",
54+
replacementSpan: test.ranges()[0],
55+
isSnippet: true,
56+
},
57+
{
58+
name: "prop_f",
59+
insertText: "prop_f={$1}",
60+
replacementSpan: test.ranges()[0],
61+
isSnippet: true,
62+
},
63+
{
64+
name: "prop_g",
65+
insertText: "prop_g={$1}",
66+
replacementSpan: test.ranges()[0],
67+
isSnippet: true,
68+
},
69+
{
70+
name: "prop_h",
71+
insertText: "prop_h={$1}",
72+
replacementSpan: test.ranges()[0],
73+
isSnippet: true,
74+
sortText: completion.SortText.OptionalMember,
75+
},
76+
{
77+
name: "prop_i",
78+
insertText: "prop_i={$1}",
79+
replacementSpan: test.ranges()[0],
80+
isSnippet: true,
81+
sortText: completion.SortText.OptionalMember,
82+
},
83+
{
84+
name: "prop_j",
85+
insertText: "prop_j={$1}",
86+
replacementSpan: test.ranges()[0],
87+
isSnippet: true,
88+
sortText: completion.SortText.OptionalMember,
89+
}
90+
],
91+
preferences: {
92+
jsxSnippetCompletion: "braces"
93+
}
94+
});

‎tests/cases/fourslash/jsxAttributeSnippetCompletionDefault.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/// <reference path="fourslash.ts" />
2+
3+
// @Filename: foo.tsx
4+
//// declare namespace JSX {
5+
//// interface Element { }
6+
//// interface IntrinsicElements {
7+
//// foo: {
8+
//// prop_a: boolean;
9+
//// prop_b: string;
10+
//// prop_c: any;
11+
//// prop_d: { p1: string; }
12+
//// prop_e: string | undefined;
13+
//// prop_f: boolean | undefined;
14+
//// prop_g: { p1: string; } | undefined;
15+
//// prop_h?: string;
16+
//// prop_i?: boolean;
17+
//// prop_j?: { p1: string; };
18+
//// }
19+
//// }
20+
//// }
21+
////
22+
//// <foo [|prop_/**/|] />
23+
24+
verify.completions({
25+
marker: "",
26+
exact: [
27+
{
28+
name: "prop_a",
29+
isSnippet: undefined,
30+
},
31+
{
32+
name: "prop_b",
33+
isSnippet: undefined,
34+
},
35+
{
36+
name: "prop_c",
37+
isSnippet: undefined,
38+
},
39+
{
40+
name: "prop_d",
41+
isSnippet: undefined,
42+
},
43+
{
44+
name: "prop_e",
45+
isSnippet: undefined,
46+
},
47+
{
48+
name: "prop_f",
49+
isSnippet: undefined,
50+
},
51+
{
52+
name: "prop_g",
53+
isSnippet: undefined,
54+
},
55+
{
56+
name: "prop_h",
57+
isSnippet: undefined,
58+
sortText: completion.SortText.OptionalMember,
59+
},
60+
{
61+
name: "prop_i",
62+
isSnippet: undefined,
63+
sortText: completion.SortText.OptionalMember,
64+
},
65+
{
66+
name: "prop_j",
67+
isSnippet: undefined,
68+
sortText: completion.SortText.OptionalMember,
69+
}
70+
],
71+
preferences: {
72+
jsxSnippetCompletion: undefined
73+
}
74+
});

0 commit comments

Comments
 (0)