Skip to content

Commit 3f34919

Browse files
antfuantfu
committed
fix(twoslash): split tokens on completion
1 parent d57736e commit 3f34919

16 files changed

+247
-920
lines changed

‎packages/shikiji-twoslash/src/core.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export function createTransformerFactory(
6565

6666
// Break tokens at the boundaries of twoslash nodes
6767
const breakpoints = Array.from(new Set(this.meta.twoslash.nodes.flatMap(i =>
68-
['hover', 'error', 'query', 'highlight'].includes(i.type)
68+
['hover', 'error', 'query', 'highlight', 'completion'].includes(i.type)
6969
? [i.start, i.start + i.length]
7070
: [],
7171
))).sort()

‎packages/shikiji-twoslash/src/renderer-rich.ts

+15-19
Original file line numberDiff line numberDiff line change
@@ -368,9 +368,6 @@ export function rendererRich(options: RendererRichOptions = {}): TwoslashRendere
368368
if (node.type !== 'text')
369369
throw new Error(`[shikiji-twoslash] nodeCompletion only works on text nodes, got ${node.type}`)
370370

371-
const leftPart = query.completionsPrefix || ''
372-
const rightPart = node.value.slice(leftPart.length || 0)
373-
374371
const items: Element[] = query.completions
375372
.map(i => ({
376373
type: 'element',
@@ -451,28 +448,27 @@ export function rendererRich(options: RendererRichOptions = {}): TwoslashRendere
451448
},
452449
)
453450

451+
const children: ElementContent[] = []
452+
if (node.value)
453+
children.push({ type: 'text', value: node.value })
454+
455+
if (hast?.completionCompose) {
456+
children.push(...hast.completionCompose({ popup, cursor }))
457+
}
458+
else {
459+
children.push({
460+
...cursor,
461+
children: [popup],
462+
})
463+
}
464+
454465
return extend(
455466
hast?.completionToken,
456467
{
457468
type: 'element',
458469
tagName: 'span',
459470
properties: {},
460-
children: [
461-
{
462-
type: 'text',
463-
value: leftPart,
464-
},
465-
...(hast?.completionCompose
466-
? hast?.completionCompose({ popup, cursor })
467-
: [{
468-
...cursor,
469-
children: [popup],
470-
}]),
471-
{
472-
type: 'text',
473-
value: rightPart,
474-
},
475-
],
471+
children,
476472
},
477473
)
478474
},

‎packages/shikiji-twoslash/test/fixtures.test.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,18 @@ describe('fixtures', () => {
99
for (const file in files) {
1010
const name = basename(file)
1111
it(name, async () => {
12-
const code = files[file]
12+
let code = files[file]
1313
const ext = file.split('.').pop()!
14+
15+
let theme = 'vitesse-dark'
16+
code = code.replace(/\/\/\s+@theme:\s+(.*)\n/, (_, t) => {
17+
theme = t
18+
return ''
19+
})
20+
1421
const hast = await codeToHast(code, {
1522
lang: ext,
16-
theme: 'vitesse-dark',
23+
theme,
1724
transformers: [
1825
transformerTwoslash({
1926
renderer: rendererRich(),

‎packages/shikiji-twoslash/test/fixtures/completion-string.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// @errors: 2322
2+
// @theme: github-dark
23
type A = '@foo' | '@bar' | '/foo' | '/bar'
34

45
const a: A = '@'

‎packages/shikiji-twoslash/test/out/completion-end-multifile-2.ts.json

-4
Original file line numberDiff line numberDiff line change
@@ -614,10 +614,6 @@
614614
]
615615
}
616616
]
617-
},
618-
{
619-
"type": "text",
620-
"value": ""
621617
}
622618
]
623619
}

‎packages/shikiji-twoslash/test/out/completion-end-multifile.ts.json

-4
Original file line numberDiff line numberDiff line change
@@ -3208,10 +3208,6 @@
32083208
]
32093209
}
32103210
]
3211-
},
3212-
{
3213-
"type": "text",
3214-
"value": ""
32153211
}
32163212
]
32173213
}

‎packages/shikiji-twoslash/test/out/completion-end.ts.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<span class="line"></span>
2424
<span class="line"><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#CB7676">const</span><span> </span><span style="color:#BD976A">a</span><span style="color:#666666">: {</span></span>
2525
<span class="line"><span style="color:#666666"> </span><span style="color:#BD976A">test</span><span style="color:#666666">:</span><span> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D">foo</span><span style="color:#C98A7D99">'</span><span> </span><span style="color:#666666">|</span><span> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D">bar</span><span style="color:#C98A7D99">'</span><span> </span><span style="color:#666666">|</span><span> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D">baz</span><span style="color:#C98A7D99">'</span><span style="color:#666666">;</span></span>
26-
<span class="line"><span style="color:#666666">}</span></span></code></span>a</span></span><span style="color:#666666">.</span><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#80A665">test</span><span style="color:#666666">:</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">foo</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">bar</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">baz</span><span style="color:#C98A7D99">"</span></span></code></span>test</span></span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">===</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D"><span>b<span class="twoslash-completion-cursor"><ul class="twoslash-completion-list"><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">ar</span></span></li><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">az</span></span></li></ul></span>ar</span></span><span style="color:#C98A7D99">'</span></span>
26+
<span class="line"><span style="color:#666666">}</span></span></code></span>a</span></span><span style="color:#666666">.</span><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#80A665">test</span><span style="color:#666666">:</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">foo</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">bar</span><span style="color:#C98A7D99">"</span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">|</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">"</span><span style="color:#C98A7D">baz</span><span style="color:#C98A7D99">"</span></span></code></span>test</span></span><span style="color:#DBD7CAEE"> </span><span style="color:#CB7676">===</span><span style="color:#DBD7CAEE"> </span><span style="color:#C98A7D99">'</span><span style="color:#C98A7D"><span>b<span class="twoslash-completion-cursor"><ul class="twoslash-completion-list"><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">ar</span></span></li><li><span class="twoslash-completions-icon completions-string"><svg viewBox="0 0 32 32"><path fill="currentColor" d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2.002 2.002 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2.002 2.002 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2.002 2.002 0 0 0-2-2m0 8H4v-2h4z"></path></svg></span><span><span class="twoslash-completions-matched">b</span><span class="twoslash-completions-unmatched">az</span></span></li></ul></span></span></span><span style="color:#C98A7D">ar</span><span style="color:#C98A7D99">'</span></span>
2727
<span class="line"></span>
2828
<span class="line"></span>
2929
<span class="line"><span style="color:#BD976A"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="line"><span style="color:#CB7676">const</span><span> </span><span style="color:#BD976A">a</span><span style="color:#666666">: {</span></span>

‎packages/shikiji-twoslash/test/out/completion-end.ts.json

+14-25
Original file line numberDiff line numberDiff line change
@@ -172,10 +172,6 @@
172172
]
173173
}
174174
]
175-
},
176-
{
177-
"type": "text",
178-
"value": ""
179175
}
180176
]
181177
}
@@ -2115,10 +2111,6 @@
21152111
]
21162112
}
21172113
]
2118-
},
2119-
{
2120-
"type": "text",
2121-
"value": ""
21222114
}
21232115
]
21242116
}
@@ -3121,10 +3113,6 @@
31213113
]
31223114
}
31233115
]
3124-
},
3125-
{
3126-
"type": "text",
3127-
"value": ""
31283116
}
31293117
]
31303118
}
@@ -4058,10 +4046,6 @@
40584046
]
40594047
}
40604048
]
4061-
},
4062-
{
4063-
"type": "text",
4064-
"value": ""
40654049
}
40664050
]
40674051
}
@@ -4851,7 +4835,7 @@
48514835
"children": [
48524836
{
48534837
"type": "element",
4854-
"value": "bar",
4838+
"value": "b",
48554839
"tagName": "span",
48564840
"properties": {},
48574841
"children": [
@@ -5010,15 +4994,24 @@
50104994
]
50114995
}
50124996
]
5013-
},
5014-
{
5015-
"type": "text",
5016-
"value": "ar"
50174997
}
50184998
]
50194999
}
50205000
]
50215001
},
5002+
{
5003+
"type": "element",
5004+
"tagName": "span",
5005+
"properties": {
5006+
"style": "color:#C98A7D"
5007+
},
5008+
"children": [
5009+
{
5010+
"type": "text",
5011+
"value": "ar"
5012+
}
5013+
]
5014+
},
50225015
{
50235016
"type": "element",
50245017
"tagName": "span",
@@ -6029,10 +6022,6 @@
60296022
]
60306023
}
60316024
]
6032-
},
6033-
{
6034-
"type": "text",
6035-
"value": ""
60366025
}
60376026
]
60386027
}

0 commit comments

Comments
 (0)