Skip to content
This repository was archived by the owner on Feb 7, 2024. It is now read-only.

Commit 0bd42a8

Browse files
antfuantfu
authoredDec 14, 2023
feat(twoslash)!: improve rich renderer (#41)
·
v0.10.2v0.9.0
1 parent 7987565 commit 0bd42a8

27 files changed

+1176
-412
lines changed
 

‎.vscode/settings.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88

99
// Auto fix
1010
"editor.codeActionsOnSave": {
11-
"source.fixAll.eslint": true,
12-
"source.organizeImports": false
11+
"source.fixAll.eslint": "explicit",
12+
"source.organizeImports": "never"
1313
},
1414

1515
// Silent the stylistic rules in you IDE, but still auto fix them

‎packages/shikiji-twoslash/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ We provide two renderers built-in, while you can also create your own:
4343

4444
This is the default renderer that aligns with the output of [`shiki-twoslash`](https://shikijs.github.io/twoslash/).
4545

46-
You might need to reference `shiki-twoslash`'s CSS to make them look good. [Here](./style-shiki-twoslash.css) we also copied the CSS from `shiki-twoslash` but it might need some cleanup.
46+
You might need to reference `shiki-twoslash`'s CSS to make them look good. [Here](./style-classic.css) we also copied the CSS from `shiki-twoslash` but it might need some cleanup.
4747

4848
### `rendererRich`
4949

@@ -55,7 +55,7 @@ This renderer provides a more explicit class name that is always prefixed with `
5555
import { rendererRich, transformerTwoSlash } from 'shikiji-twoslash'
5656

5757
transformerTwoSlash({
58-
renderer: rendererRich // <--
58+
renderer: rendererRich() // <--
5959
})
6060
```
6161

‎packages/shikiji-twoslash/package.json

+9-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"default": "./dist/index.mjs"
2424
},
2525
"./style-rich.css": "./style-rich.css",
26-
"./style-shiki-twoslash.css": "./style-shiki-twoslash.css",
26+
"./style-classic.css": "./style-classic.css",
2727
"./*": "./dist/*"
2828
},
2929
"main": "./dist/index.mjs",
@@ -47,12 +47,19 @@
4747
"prepublishOnly": "nr build",
4848
"test": "vitest"
4949
},
50+
"peerDependencies": {
51+
"typescript": "^5.0.0"
52+
},
5053
"dependencies": {
5154
"@typescript/twoslash": "^3.2.4",
5255
"shikiji": "workspace:*"
5356
},
5457
"devDependencies": {
58+
"@iconify-json/carbon": "^1.1.26",
59+
"@iconify-json/codicon": "^1.1.39",
60+
"hast-util-from-html": "^2.0.1",
5561
"shiki": "^0.14.6",
56-
"shiki-twoslash": "^3.1.2"
62+
"shiki-twoslash": "^3.1.2",
63+
"typescript": "^5.3.3"
5764
}
5865
}

‎packages/shikiji-twoslash/scripts/icons.ts

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import fs from 'node:fs/promises'
2+
import { icons as codicon } from '@iconify-json/codicon'
3+
import { icons as carbon } from '@iconify-json/carbon'
4+
import { fromHtml } from 'hast-util-from-html'
5+
import type { TwoSlashReturn } from '@typescript/twoslash'
6+
7+
type CompletionItem = NonNullable<TwoSlashReturn['queries'][0]['completions']>[0]
8+
9+
async function buildIcons(filepath: string, map: Record<string, string>) {
10+
const result = Object.fromEntries(
11+
Object.entries(map).map(([key, value]) => {
12+
const iconset = value.startsWith('codicon:') ? codicon : carbon
13+
const icon = iconset.icons[value.split(':')[1]]
14+
if (!icon)
15+
throw new Error(`icon not found: ${value}`)
16+
const str = `<svg viewBox="0 0 ${carbon.height} ${carbon.height}">${icon.body}</svg>`
17+
const hast = fromHtml(str, { space: 'svg', fragment: true }).children[0]
18+
return [key, hast]
19+
}),
20+
)
21+
22+
await fs.writeFile(
23+
filepath,
24+
`${JSON.stringify(result, (r, v) => {
25+
if (v?.position)
26+
delete v.position
27+
return v
28+
}, 2)}\n`,
29+
'utf-8',
30+
)
31+
}
32+
33+
await buildIcons(
34+
'./src/icons-completions.json',
35+
{
36+
module: 'carbon:3d-mpr-toggle',
37+
class: 'carbon:data-class',
38+
method: 'carbon:function',
39+
property: 'carbon:tools',
40+
constructor: 'carbon:3d-software',
41+
interface: 'carbon:connect',
42+
function: 'carbon:function',
43+
string: 'carbon:string-text',
44+
} satisfies Partial<Record<CompletionItem['kind'], string>>,
45+
)
46+
47+
await buildIcons(
48+
'./src/icons-tags.json',
49+
{
50+
log: 'carbon:information-square',
51+
error: 'carbon:warning',
52+
warn: 'carbon:warning-alt',
53+
annotate: 'carbon:idea',
54+
},
55+
)

‎packages/shikiji-twoslash/src/icons-completions.json

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
{
2+
"module": {
3+
"type": "element",
4+
"tagName": "svg",
5+
"properties": {
6+
"viewBox": "0 0 32 32"
7+
},
8+
"children": [
9+
{
10+
"type": "element",
11+
"tagName": "path",
12+
"properties": {
13+
"d": "M11 2H2v9h2V4h7V2z",
14+
"fill": "currentColor"
15+
},
16+
"children": []
17+
},
18+
{
19+
"type": "element",
20+
"tagName": "path",
21+
"properties": {
22+
"d": "M2 21v9h9v-2H4v-7H2z",
23+
"fill": "currentColor"
24+
},
25+
"children": []
26+
},
27+
{
28+
"type": "element",
29+
"tagName": "path",
30+
"properties": {
31+
"d": "M30 11V2h-9v2h7v7h2z",
32+
"fill": "currentColor"
33+
},
34+
"children": []
35+
},
36+
{
37+
"type": "element",
38+
"tagName": "path",
39+
"properties": {
40+
"d": "M21 30h9v-9h-2v7h-7v2z",
41+
"fill": "currentColor"
42+
},
43+
"children": []
44+
},
45+
{
46+
"type": "element",
47+
"tagName": "path",
48+
"properties": {
49+
"d": "M25.49 10.13l-9-5a1 1 0 0 0-1 0l-9 5A1 1 0 0 0 6 11v10a1 1 0 0 0 .51.87l9 5a1 1 0 0 0 1 0l9-5A1 1 0 0 0 26 21V11a1 1 0 0 0-.51-.87zM16 7.14L22.94 11L16 14.86L9.06 11zM8 12.7l7 3.89v7.71l-7-3.89zm9 11.6v-7.71l7-3.89v7.71z",
50+
"fill": "currentColor"
51+
},
52+
"children": []
53+
}
54+
]
55+
},
56+
"class": {
57+
"type": "element",
58+
"tagName": "svg",
59+
"properties": {
60+
"viewBox": "0 0 32 32"
61+
},
62+
"children": [
63+
{
64+
"type": "element",
65+
"tagName": "path",
66+
"properties": {
67+
"fill": "currentColor",
68+
"d": "M26 16a3.961 3.961 0 0 0-2.02.566l-2.859-2.859l2.293-2.293a2 2 0 0 0 0-2.828l-6-6a2 2 0 0 0-2.828 0l-6 6a2 2 0 0 0 0 2.828l2.293 2.293l-2.859 2.859a4.043 4.043 0 1 0 1.414 1.414l2.859-2.859l2.293 2.293a1.977 1.977 0 0 0 .414.31V22h-3v8h8v-8h-3v-4.277a1.977 1.977 0 0 0 .414-.309l2.293-2.293l2.859 2.859A3.989 3.989 0 1 0 26 16M8 20a2 2 0 1 1-2-2a2.002 2.002 0 0 1 2 2m10 4v4h-4v-4zm-2-8l-6-6l6-6l6 6Zm10 6a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2"
69+
},
70+
"children": []
71+
}
72+
]
73+
},
74+
"method": {
75+
"type": "element",
76+
"tagName": "svg",
77+
"properties": {
78+
"viewBox": "0 0 32 32"
79+
},
80+
"children": [
81+
{
82+
"type": "element",
83+
"tagName": "path",
84+
"properties": {
85+
"fill": "currentColor",
86+
"d": "m19.626 29.526l-.516-1.933a12.004 12.004 0 0 0 6.121-19.26l1.538-1.28a14.003 14.003 0 0 1-7.143 22.473"
87+
},
88+
"children": []
89+
},
90+
{
91+
"type": "element",
92+
"tagName": "path",
93+
"properties": {
94+
"fill": "currentColor",
95+
"d": "M10 29H8v-3.82l.804-.16C10.262 24.727 12 23.62 12 20v-1.382l-4-2v-2.236l4-2V12c0-5.467 3.925-9 10-9h2v3.82l-.804.16C21.738 7.273 20 8.38 20 12v.382l4 2v2.236l-4 2V20c0 5.467-3.925 9-10 9m0-2c4.935 0 8-2.682 8-7v-2.618l3.764-1.882L18 13.618V12c0-4.578 2.385-6.192 4-6.76V5c-4.935 0-8 2.682-8 7v1.618L10.236 15.5L14 17.382V20c0 4.578-2.385 6.192-4 6.76Z"
96+
},
97+
"children": []
98+
},
99+
{
100+
"type": "element",
101+
"tagName": "path",
102+
"properties": {
103+
"fill": "currentColor",
104+
"d": "M5.231 24.947a14.003 14.003 0 0 1 7.147-22.474l.516 1.932a12.004 12.004 0 0 0-6.125 19.263Z"
105+
},
106+
"children": []
107+
}
108+
]
109+
},
110+
"property": {
111+
"type": "element",
112+
"tagName": "svg",
113+
"properties": {
114+
"viewBox": "0 0 32 32"
115+
},
116+
"children": [
117+
{
118+
"type": "element",
119+
"tagName": "path",
120+
"properties": {
121+
"fill": "currentColor",
122+
"d": "M12.1 2a9.8 9.8 0 0 0-5.4 1.6l6.4 6.4a2.1 2.1 0 0 1 .2 3a2.1 2.1 0 0 1-3-.2L3.7 6.4A9.84 9.84 0 0 0 2 12.1a10.14 10.14 0 0 0 10.1 10.1a10.9 10.9 0 0 0 2.6-.3l6.7 6.7a5 5 0 0 0 7.1-7.1l-6.7-6.7a10.9 10.9 0 0 0 .3-2.6A10 10 0 0 0 12.1 2m8 10.1a7.61 7.61 0 0 1-.3 2.1l-.3 1.1l.8.8l6.7 6.7a2.88 2.88 0 0 1 .9 2.1A2.72 2.72 0 0 1 27 27a2.9 2.9 0 0 1-4.2 0l-6.7-6.7l-.8-.8l-1.1.3a7.61 7.61 0 0 1-2.1.3a8.27 8.27 0 0 1-5.7-2.3A7.63 7.63 0 0 1 4 12.1a8.33 8.33 0 0 1 .3-2.2l4.4 4.4a4.14 4.14 0 0 0 5.9.2a4.14 4.14 0 0 0-.2-5.9L10 4.2a6.45 6.45 0 0 1 2-.3a8.27 8.27 0 0 1 5.7 2.3a8.49 8.49 0 0 1 2.4 5.9"
123+
},
124+
"children": []
125+
}
126+
]
127+
},
128+
"constructor": {
129+
"type": "element",
130+
"tagName": "svg",
131+
"properties": {
132+
"viewBox": "0 0 32 32"
133+
},
134+
"children": [
135+
{
136+
"type": "element",
137+
"tagName": "path",
138+
"properties": {
139+
"d": "M21.49 13.115l-9-5a1 1 0 0 0-1 0l-9 5A1.008 1.008 0 0 0 2 14v9.995a1 1 0 0 0 .52.87l9 5A1.004 1.004 0 0 0 12 30a1.056 1.056 0 0 0 .49-.135l9-5A.992.992 0 0 0 22 24V14a1.008 1.008 0 0 0-.51-.885zM11 27.295l-7-3.89v-7.72l7 3.89zm1-9.45L5.06 14L12 10.135l6.94 3.86zm8 5.56l-7 3.89v-7.72l7-3.89z",
140+
"fill": "currentColor"
141+
},
142+
"children": []
143+
},
144+
{
145+
"type": "element",
146+
"tagName": "path",
147+
"properties": {
148+
"d": "M30 6h-4V2h-2v4h-4v2h4v4h2V8h4V6z",
149+
"fill": "currentColor"
150+
},
151+
"children": []
152+
}
153+
]
154+
},
155+
"interface": {
156+
"type": "element",
157+
"tagName": "svg",
158+
"properties": {
159+
"viewBox": "0 0 32 32"
160+
},
161+
"children": [
162+
{
163+
"type": "element",
164+
"tagName": "path",
165+
"properties": {
166+
"fill": "currentColor",
167+
"d": "M23 16.01a7 7 0 0 0-4.18 1.39l-4.22-4.22A6.86 6.86 0 0 0 16 9.01a7 7 0 1 0-2.81 5.59l4.21 4.22a7 7 0 1 0 5.6-2.81m-19-7a5 5 0 1 1 5 5a5 5 0 0 1-5-5"
168+
},
169+
"children": []
170+
}
171+
]
172+
},
173+
"function": {
174+
"type": "element",
175+
"tagName": "svg",
176+
"properties": {
177+
"viewBox": "0 0 32 32"
178+
},
179+
"children": [
180+
{
181+
"type": "element",
182+
"tagName": "path",
183+
"properties": {
184+
"fill": "currentColor",
185+
"d": "m19.626 29.526l-.516-1.933a12.004 12.004 0 0 0 6.121-19.26l1.538-1.28a14.003 14.003 0 0 1-7.143 22.473"
186+
},
187+
"children": []
188+
},
189+
{
190+
"type": "element",
191+
"tagName": "path",
192+
"properties": {
193+
"fill": "currentColor",
194+
"d": "M10 29H8v-3.82l.804-.16C10.262 24.727 12 23.62 12 20v-1.382l-4-2v-2.236l4-2V12c0-5.467 3.925-9 10-9h2v3.82l-.804.16C21.738 7.273 20 8.38 20 12v.382l4 2v2.236l-4 2V20c0 5.467-3.925 9-10 9m0-2c4.935 0 8-2.682 8-7v-2.618l3.764-1.882L18 13.618V12c0-4.578 2.385-6.192 4-6.76V5c-4.935 0-8 2.682-8 7v1.618L10.236 15.5L14 17.382V20c0 4.578-2.385 6.192-4 6.76Z"
195+
},
196+
"children": []
197+
},
198+
{
199+
"type": "element",
200+
"tagName": "path",
201+
"properties": {
202+
"fill": "currentColor",
203+
"d": "M5.231 24.947a14.003 14.003 0 0 1 7.147-22.474l.516 1.932a12.004 12.004 0 0 0-6.125 19.263Z"
204+
},
205+
"children": []
206+
}
207+
]
208+
},
209+
"string": {
210+
"type": "element",
211+
"tagName": "svg",
212+
"properties": {
213+
"viewBox": "0 0 32 32"
214+
},
215+
"children": [
216+
{
217+
"type": "element",
218+
"tagName": "path",
219+
"properties": {
220+
"fill": "currentColor",
221+
"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"
222+
},
223+
"children": []
224+
}
225+
]
226+
}
227+
}

0 commit comments

Comments
 (0)
This repository has been archived.