Skip to content

Commit c346a17

Browse files
tylerablaketylerablake
authored
feat: autocomplete, suggestions, and hover to html files (#274)
1 parent ff2e91f commit c346a17

File tree

9 files changed

+1594
-1
lines changed

9 files changed

+1594
-1
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -372,4 +372,4 @@
372372
}
373373
]
374374
}
375-
}
375+
}

‎src/main.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { IosProject } from './project/iosProject';
77
import { Project } from './project/project';
88
import { ChannelLogger } from './services/channelLogger';
99
import { services } from './services/extensionHostServices';
10+
import { COMPLETION_PROVIDER } from './services/language-services/autocomplete';
11+
import { HOVER_PROVIDERS } from './services/language-services/hover/hover';
12+
import { SUGGESTION_PROVIDERS } from './services/language-services/suggestions';
1013

1114
// this method is called when the extension is activated
1215
export function activate(context: vscode.ExtensionContext) {
@@ -127,6 +130,10 @@ export function activate(context: vscode.ExtensionContext) {
127130
context.subscriptions.push(runIosCommand);
128131
context.subscriptions.push(runAndroidCommand);
129132
context.subscriptions.push(showOutputChannelCommand);
133+
134+
context.subscriptions.push(COMPLETION_PROVIDER);
135+
context.subscriptions.concat(SUGGESTION_PROVIDERS);
136+
context.subscriptions.concat(HOVER_PROVIDERS);
130137
}
131138

132139
function logExtensionInfo(cliVersion: string, packageJSON: any): void {

‎src/services/language-services/autocomplete.ts

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import * as vscode from 'vscode';
2+
import { GENERIC_AUTOCOMPLETE_DESCRIPTION } from './constants';
3+
4+
export const AUTOCAPITALIZATION = new vscode.CompletionItem('autocapitalizationType');
5+
6+
AUTOCAPITALIZATION.commitCharacters = ['='];
7+
AUTOCAPITALIZATION.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
8+
9+
export const KEYBOARD_TYPE = new vscode.CompletionItem('keyboardType');
10+
11+
KEYBOARD_TYPE.commitCharacters = ['='];
12+
KEYBOARD_TYPE.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
13+
14+
export const RETURN_KEY_TYPE = new vscode.CompletionItem('returnKeyType');
15+
16+
RETURN_KEY_TYPE.commitCharacters = ['='];
17+
RETURN_KEY_TYPE.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
18+
19+
export const TAB_BACKGROUND_COLOR = new vscode.CompletionItem('tabBackgroundColor');
20+
21+
TAB_BACKGROUND_COLOR.commitCharacters = ['='];
22+
TAB_BACKGROUND_COLOR.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
23+
24+
export const SELECTED_TAB_TEXT_COLOR = new vscode.CompletionItem('selectedTabTextColor');
25+
26+
SELECTED_TAB_TEXT_COLOR.commitCharacters = ['='];
27+
SELECTED_TAB_TEXT_COLOR.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
28+
29+
export const TAB_TEXT_COLOR = new vscode.CompletionItem('tabTextColor');
30+
31+
TAB_TEXT_COLOR.commitCharacters = ['='];
32+
TAB_TEXT_COLOR.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
33+
34+
export const ORIENTATION = new vscode.CompletionItem('orientation');
35+
36+
ORIENTATION.commitCharacters = ['='];
37+
ORIENTATION.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
38+
39+
export const FONT_STYLE = new vscode.CompletionItem('fontStyle');
40+
41+
FONT_STYLE.commitCharacters = ['='];
42+
FONT_STYLE.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
43+
44+
export const TEXT_ALIGNMENT = new vscode.CompletionItem('textAlignment');
45+
46+
TEXT_ALIGNMENT.commitCharacters = ['='];
47+
TEXT_ALIGNMENT.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
48+
49+
export const TEXT_DECORATION = new vscode.CompletionItem('textDecoration');
50+
51+
TEXT_DECORATION.commitCharacters = ['='];
52+
TEXT_DECORATION.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
53+
54+
export const TEXT_TRANSFORM = new vscode.CompletionItem('textTransform');
55+
56+
TEXT_TRANSFORM.commitCharacters = ['='];
57+
TEXT_TRANSFORM.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
58+
59+
export const VISIBILITY = new vscode.CompletionItem('visibility');
60+
61+
VISIBILITY.commitCharacters = ['='];
62+
VISIBILITY.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
63+
64+
export const VERTICAL_ALIGNMENT = new vscode.CompletionItem('verticalAlignment');
65+
66+
VERTICAL_ALIGNMENT.commitCharacters = ['='];
67+
VERTICAL_ALIGNMENT.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
68+
69+
export const HORIZONTAL_ALIGNMENT = new vscode.CompletionItem('horizontalAlignment');
70+
71+
HORIZONTAL_ALIGNMENT.commitCharacters = ['='];
72+
HORIZONTAL_ALIGNMENT.documentation = new vscode.MarkdownString(GENERIC_AUTOCOMPLETE_DESCRIPTION);
73+
74+
export const COMPLETION_PROVIDER = vscode.languages.registerCompletionItemProvider('html', {
75+
76+
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext) {
77+
78+
return [
79+
AUTOCAPITALIZATION,
80+
KEYBOARD_TYPE,
81+
RETURN_KEY_TYPE,
82+
TAB_BACKGROUND_COLOR,
83+
SELECTED_TAB_TEXT_COLOR,
84+
TAB_TEXT_COLOR,
85+
ORIENTATION,
86+
FONT_STYLE,
87+
TEXT_ALIGNMENT,
88+
TEXT_DECORATION,
89+
TEXT_TRANSFORM,
90+
VISIBILITY,
91+
VERTICAL_ALIGNMENT,
92+
HORIZONTAL_ALIGNMENT,
93+
];
94+
95+
},
96+
});

‎src/services/language-services/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const GENERIC_AUTOCOMPLETE_DESCRIPTION = 'Press `=` to see possible values.';

‎src/services/language-services/hover/hover.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { LAYOUT_HOVER_PROVIDERS } from './layout-hover';
2+
import { UI_ENUM_PROVIDERS } from './ui-enum-hover';
3+
import { WIDGET_HOVER_PROVIDERS } from './widget-hover';
4+
5+
export const HOVER_PROVIDERS = LAYOUT_HOVER_PROVIDERS.concat(WIDGET_HOVER_PROVIDERS, UI_ENUM_PROVIDERS);

‎src/services/language-services/hover/layout-hover.ts

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import * as vscode from 'vscode';
2+
3+
export const STACK_LAYOUT = vscode.languages.registerHoverProvider('html', {
4+
provideHover(document, position, token) {
5+
6+
const range = document.getWordRangeAtPosition(position);
7+
const word = document.getText(range);
8+
9+
if (word.toLowerCase() === 'stacklayout') {
10+
11+
const autocapDescription: vscode.MarkdownString = new vscode.MarkdownString()
12+
.appendText(`A Layout that arranges its children horizontally or vertically. The direction can be set by orientation property.\n`)
13+
.appendText(`\n\n{N}`)
14+
.appendMarkdown(` [Docs](https://docs.nativescript.org/ui/layouts/layout-containers)`)
15+
.appendText(` | `)
16+
.appendMarkdown(`[API Reference](https://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_layout_)`);
17+
18+
autocapDescription.isTrusted = true;
19+
20+
return new vscode.Hover(autocapDescription);
21+
}
22+
},
23+
});
24+
25+
export const GRID_LAYOUT = vscode.languages.registerHoverProvider('html', {
26+
provideHover(document, position, token) {
27+
28+
const range = document.getWordRangeAtPosition(position);
29+
const word = document.getText(range);
30+
31+
if (word.toLowerCase() === 'gridlayout') {
32+
33+
const autocapDescription: vscode.MarkdownString = new vscode.MarkdownString()
34+
.appendText(`Defines a rectangular layout area that consists of columns and rows.\n`)
35+
.appendText(`\n\n{N}`)
36+
.appendMarkdown(` [Docs](https://docs.nativescript.org/ui/layouts/layout-containers)`)
37+
.appendText(` | `)
38+
.appendMarkdown(`[API Reference](https://docs.nativescript.org/api-reference/modules/_ui_layouts_grid_layout_)`);
39+
40+
autocapDescription.isTrusted = true;
41+
42+
return new vscode.Hover(autocapDescription);
43+
}
44+
},
45+
});
46+
47+
export const ABSOLUTE_LAYOUT = vscode.languages.registerHoverProvider('html', {
48+
provideHover(document, position, token) {
49+
50+
const range = document.getWordRangeAtPosition(position);
51+
const word = document.getText(range);
52+
53+
if (word.toLowerCase() === 'absolutelayout') {
54+
55+
const autocapDescription: vscode.MarkdownString = new vscode.MarkdownString()
56+
.appendText(`A layout that lets you specify exact locations (left/top coordinates) of its children.\n`)
57+
.appendText(`\n\n{N}`)
58+
.appendMarkdown(` [Docs](https://docs.nativescript.org/ui/layouts/layout-containers)`)
59+
.appendText(` | `)
60+
.appendMarkdown(`[API Reference](https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_)`);
61+
62+
autocapDescription.isTrusted = true;
63+
64+
return new vscode.Hover(autocapDescription);
65+
}
66+
},
67+
});
68+
69+
export const DOCK_LAYOUT = vscode.languages.registerHoverProvider('html', {
70+
provideHover(document, position, token) {
71+
72+
const range = document.getWordRangeAtPosition(position);
73+
const word = document.getText(range);
74+
75+
if (word.toLowerCase() === 'docklayout') {
76+
77+
const autocapDescription: vscode.MarkdownString = new vscode.MarkdownString()
78+
.appendText(`A Layout that arranges its children at its outer edges, and allows its last child to take up the remaining space.\n`)
79+
.appendText(`\n\n{N}`)
80+
.appendMarkdown(` [Docs](https://docs.nativescript.org/ui/layouts/layout-containers)`)
81+
.appendText(` | `)
82+
.appendMarkdown(`[API Reference](https://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_layout_)`);
83+
84+
autocapDescription.isTrusted = true;
85+
86+
return new vscode.Hover(autocapDescription);
87+
}
88+
},
89+
});
90+
91+
export const FLEXBOX_LAYOUT = vscode.languages.registerHoverProvider('html', {
92+
provideHover(document, position, token) {
93+
94+
const range = document.getWordRangeAtPosition(position);
95+
const word = document.getText(range);
96+
97+
if (word.toLowerCase() === 'flexboxlayout') {
98+
99+
const autocapDescription: vscode.MarkdownString = new vscode.MarkdownString()
100+
.appendText(`A layout based on flexbox.\n`)
101+
.appendText(`\n\n{N}`)
102+
.appendMarkdown(` [Docs](https://docs.nativescript.org/ui/layouts/layout-containers)`)
103+
.appendText(` | `)
104+
.appendMarkdown(`[API Reference](https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_)`);
105+
106+
autocapDescription.isTrusted = true;
107+
108+
return new vscode.Hover(autocapDescription);
109+
}
110+
},
111+
});
112+
113+
export const WRAP_LAYOUT = vscode.languages.registerHoverProvider('html', {
114+
provideHover(document, position, token) {
115+
116+
const range = document.getWordRangeAtPosition(position);
117+
const word = document.getText(range);
118+
119+
if (word.toLowerCase() === 'wraplayout') {
120+
121+
const autocapDescription: vscode.MarkdownString = new vscode.MarkdownString()
122+
.appendText(`A layout that positions children in rows or columns depending on orientation property until space is filled and then wraps them on new row or column.\n`)
123+
.appendText(`\n\n{N}`)
124+
.appendMarkdown(` [Docs](https://docs.nativescript.org/ui/layouts/layout-containers)`)
125+
.appendText(` | `)
126+
.appendMarkdown(`[API Reference](https://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_layout_)`);
127+
128+
autocapDescription.isTrusted = true;
129+
130+
return new vscode.Hover(autocapDescription);
131+
}
132+
},
133+
});
134+
135+
export const LAYOUT_HOVER_PROVIDERS = [
136+
STACK_LAYOUT,
137+
GRID_LAYOUT,
138+
ABSOLUTE_LAYOUT,
139+
DOCK_LAYOUT,
140+
FLEXBOX_LAYOUT,
141+
WRAP_LAYOUT,
142+
];

0 commit comments

Comments
 (0)