-
-
Notifications
You must be signed in to change notification settings - Fork 780
/
uno.ts
107 lines (90 loc) · 2.94 KB
/
uno.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
/// <reference types="codemirror/addon/hint/show-hint" />
import type { GenerateResult, UserConfig } from 'unocss'
import { createGenerator } from 'unocss'
import type { Editor, Hints } from 'codemirror'
import { createAutocomplete } from '@unocss/autocomplete'
import MagicString from 'magic-string'
import type { UnocssPluginContext } from '@unocss/core'
import { evaluateUserConfig } from '@unocss/shared-docs'
import { customConfigRaw, inputHTML } from './url'
import { defaultConfig } from './config'
export { customConfigRaw, inputHTML } from './url'
export const init = ref(false)
export const customConfigError = ref<Error>()
export const uno = createGenerator({}, defaultConfig.value)
export const output = shallowRef<GenerateResult>()
export const showPreflights = ref(false)
let customConfig: UserConfig = {}
let autocomplete = createAutocomplete(uno)
const reGenerate = () => {
uno.setConfig(customConfig, defaultConfig.value)
generate()
autocomplete = createAutocomplete(uno)
}
export const transformedHTML = computedAsync(async () => {
const id = 'input.html'
const input = new MagicString(inputHTML.value)
await applyTransformers(input, id, 'pre')
await applyTransformers(input, id)
await applyTransformers(input, id, 'post')
return input.toString()
})
export async function applyTransformers(code: MagicString, id: string, enforce?: 'pre' | 'post') {
let { transformers } = uno.config
transformers = (transformers ?? []).filter(i => i.enforce === enforce)
if (!transformers.length)
return
const fakePluginContext = { uno } as UnocssPluginContext
for (const { idFilter, transform } of transformers) {
if (idFilter && !idFilter(id))
continue
await transform(code, id, fakePluginContext)
}
}
export async function generate() {
output.value = await uno.generate(transformedHTML.value || '')
init.value = true
}
export async function getHint(cm: Editor): Promise<Hints | undefined> {
const cursor = cm.indexFromPos(cm.getCursor())
const result = await autocomplete.suggestInFile(cm.getDoc().getValue(), cursor)
if (!result.suggestions?.length)
return
return {
from: cm.posFromIndex(cursor),
to: cm.posFromIndex(cursor),
list: result.suggestions.map(([value, label]) => {
const resolved = result.resolveReplacement(value)
return ({
text: resolved.replacement,
displayText: label,
from: cm.posFromIndex(resolved.start),
to: cm.posFromIndex(resolved.end),
})
}),
}
}
debouncedWatch(
customConfigRaw,
async () => {
customConfigError.value = undefined
try {
const result = await evaluateUserConfig(customConfigRaw.value)
if (result) {
customConfig = result
reGenerate()
}
}
catch (e) {
console.error(e)
customConfigError.value = e as Error
}
},
{ debounce: 300, immediate: true },
)
watch(
transformedHTML,
generate,
{ immediate: true },
)
watch(defaultConfig, reGenerate)