/
autocomplete.ts
141 lines (119 loc) · 3.99 KB
/
autocomplete.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import type { UnocssAutocomplete } from '@unocss/autocomplete'
import { createAutocomplete } from '@unocss/autocomplete'
import type { CompletionItemProvider, ExtensionContext } from 'vscode'
import { CompletionItem, CompletionItemKind, CompletionList, MarkdownString, Range, languages } from 'vscode'
import type { UnoGenerator, UnocssPluginContext } from '@unocss/core'
import { getCSS, getColorString, getPrettiedCSS, getPrettiedMarkdown, isSubdir } from './utils'
import { log } from './log'
import type { ContextLoader } from './contextLoader'
import { isCssId } from './integration'
const languageIds = [
'erb',
'haml',
'hbs',
'html',
'css',
'javascript',
'javascriptreact',
'markdown',
'ejs',
'php',
'svelte',
'typescript',
'typescriptreact',
'vue-html',
'vue',
'sass',
'scss',
'less',
'stylus',
'astro',
]
const delimiters = ['-', ':']
class UnoCompletionItem extends CompletionItem {
uno: UnoGenerator
constructor(label: string, kind: CompletionItemKind, uno: UnoGenerator) {
super(label, kind)
this.uno = uno
}
}
export async function registerAutoComplete(
cwd: string,
contextLoader: ContextLoader,
ext: ExtensionContext,
) {
const autoCompletes = new Map<UnocssPluginContext, UnocssAutocomplete>()
contextLoader.events.on('contextReload', (ctx) => {
autoCompletes.delete(ctx)
})
contextLoader.events.on('contextUnload', (ctx) => {
autoCompletes.delete(ctx)
})
function getAutocomplete(ctx: UnocssPluginContext) {
const cached = autoCompletes.get(ctx)
if (cached)
return cached
const autocomplete = createAutocomplete(ctx.uno)
autoCompletes.set(ctx, autocomplete)
return autocomplete
}
async function getMarkdown(uno: UnoGenerator, util: string) {
return new MarkdownString(await getPrettiedMarkdown(uno, util))
}
const provider: CompletionItemProvider<UnoCompletionItem> = {
async provideCompletionItems(doc, position) {
const id = doc.uri.fsPath
if (!isSubdir(cwd, id))
return null
const code = doc.getText()
if (!code)
return null
let ctx = await contextLoader.resolveContext(code, id)
if (!ctx)
ctx = await contextLoader.resolveClosestContext(code, id)
if (!ctx.filter(code, id) && !isCssId(id))
return null
try {
const autoComplete = getAutocomplete(ctx)
const result = await autoComplete.suggestInFile(code, doc.offsetAt(position))
log.appendLine(`🤖 ${id} | ${result.suggestions.slice(0, 10).map(v => `[${v[0]}, ${v[1]}]`).join(', ')}`)
if (!result.suggestions.length)
return
const completionItems: UnoCompletionItem[] = []
for (const [value, label] of result.suggestions) {
const css = await getCSS(ctx!.uno, value)
const colorString = getColorString(css)
const itemKind = colorString ? CompletionItemKind.Color : CompletionItemKind.EnumMember
const item = new UnoCompletionItem(value, itemKind, ctx!.uno)
const resolved = result.resolveReplacement(value)
item.insertText = resolved.replacement
item.range = new Range(doc.positionAt(resolved.start), doc.positionAt(resolved.end))
if (colorString) {
item.documentation = colorString
item.sortText = /-\d$/.test(label) ? '1' : '2' // reorder color completions
}
completionItems.push(item)
}
return new CompletionList(completionItems, true)
}
catch (e) {
log.appendLine(`⚠️ ${String(e)}`)
return null
}
},
async resolveCompletionItem(item) {
if (item.kind === CompletionItemKind.Color)
item.detail = await (await getPrettiedCSS(item.uno, item.label as string)).prettified
else
item.documentation = await getMarkdown(item.uno, item.label as string)
return item
},
}
ext.subscriptions.push(
languages.registerCompletionItemProvider(
languageIds,
provider,
...delimiters,
),
)
}