Skip to content

Commit f54cbf6

Browse files
antfuantfu
committed
fix(vitepress): improve class handing, reduce html payload size
1 parent 68429e4 commit f54cbf6

11 files changed

+191
-327
lines changed

‎packages/shikiji-twoslash/style-rich.css

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--twoslash-docs-color: #888;
1111
--twoslash-docs-font: sans-serif;
1212
--twoslach-code-font: inherit;
13+
--twoslach-code-font-size: 1em;
1314
--twoslash-matched-color: inherit;
1415
--twoslash-unmatched-color: #888;
1516
--twoslash-cursor-color: #8888;
@@ -95,6 +96,7 @@
9596

9697
.twoslash .twoslash-popup-code {
9798
font-family: var(--twoslach-code-font);
99+
font-size: var(--twoslach-code-font-size);
98100
}
99101

100102
.twoslash .twoslash-popup-docs {

‎packages/vitepress-plugin-twoslash/src/client.ts

+18-1
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,33 @@ const TwoslashFloatingVue = {
2424
app.use(FloatingVue, {
2525
...options,
2626
themes: {
27-
twoslash: {
27+
'twoslash': {
2828
$extend: 'dropdown',
2929
triggers: isMobile ? ['touch'] : ['hover', 'touch'],
3030
popperTriggers: isMobile ? ['touch'] : ['hover', 'touch'],
31+
placement: 'bottom-start',
3132
overflowPadding: 10,
3233
delay: 0,
3334
handleResize: false,
3435
autoHide: true,
3536
instantMove: true,
3637
flip: false,
38+
arrowPadding: 8,
39+
autoBoundaryMaxSize: true,
40+
},
41+
'twoslash-query': {
42+
$extend: 'twoslash',
43+
triggers: ['click'],
44+
popperTriggers: ['click'],
45+
autoHide: false,
46+
},
47+
'twoslash-completion': {
48+
$extend: 'twoslash-query',
49+
triggers: ['click'],
50+
popperTriggers: ['click'],
51+
autoHide: false,
52+
distance: 0,
53+
arrowOverflow: true,
3754
},
3855
...options.theme,
3956
},

‎packages/vitepress-plugin-twoslash/src/renderer-floating-vue.ts

+19-25
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,18 @@ import type { VitePressPluginTwoslashOptions } from 'vitepress-plugin-twoslash'
1010
export { defaultHoverInfoProcessor }
1111

1212
export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & RendererRichOptions = {}): TwoslashRenderer {
13+
const classCopyIgnore = 'vp-copy-ignore'
14+
const classFloatingPanel = 'twoslash-floating'
15+
const classCode = 'vp-code'
16+
const classMarkdown = 'vp-doc'
17+
const floatingVueTheme = 'twoslash'
18+
const floatingVueThemeQuery = 'twoslash-query'
19+
const floatingVueThemeCompletion = 'twoslash-completion'
20+
1321
const hoverBasicProps = {
1422
'class': 'twoslash-hover',
15-
'popper-class': 'vp-code shiki floating-vue-twoslash vp-copy-ignore',
16-
'placement': 'bottom-start',
17-
'theme': 'twoslash',
18-
':arrow-padding': '8',
19-
':auto-boundary-max-size': 'true',
20-
}
21-
const hoverPresistedProps = {
22-
...hoverBasicProps,
23-
':shown': 'true',
24-
':triggers': '["click"]',
25-
':popper-triggers': '["click"]',
26-
':auto-hide': 'false',
23+
'popper-class': ['shiki', classFloatingPanel, classCopyIgnore, classCode].join(' '),
24+
'theme': floatingVueTheme,
2725
}
2826

2927
function compose(parts: { token: Element | Text, popup: Element }): Element[] {
@@ -50,7 +48,7 @@ export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & Re
5048
}
5149

5250
const rich = rendererRich({
53-
classExtra: 'vp-copy-ignore',
51+
classExtra: classCopyIgnore,
5452
...options,
5553
renderMarkdown,
5654
renderMarkdownInline,
@@ -62,31 +60,27 @@ export function rendererFloatingVue(options: VitePressPluginTwoslashOptions & Re
6260
hoverCompose: compose,
6361
queryToken: {
6462
tagName: 'v-menu',
65-
properties: hoverPresistedProps,
63+
properties: {
64+
...hoverBasicProps,
65+
theme: floatingVueThemeQuery,
66+
},
6667
},
6768
queryCompose: compose,
6869
popupDocs: {
69-
class: 'twoslash-popup-docs vp-doc',
70+
class: `twoslash-popup-docs ${classMarkdown}`,
7071
},
7172
popupDocsTags: {
72-
class: 'twoslash-popup-docs twoslash-popup-docs-tags vp-doc',
73+
class: `twoslash-popup-docs twoslash-popup-docs-tags ${classMarkdown}`,
7374
},
7475
completionCompose({ popup, cursor }) {
7576
return [
7677
<Element>{
7778
type: 'element',
7879
tagName: 'v-menu',
7980
properties: {
80-
'popper-class': 'vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore',
81-
'placement': 'bottom-start',
82-
'theme': 'twoslash',
83-
':distance': '0',
84-
':arrow-overflow': 'true',
85-
':auto-boundary-max-size': 'true',
81+
'popper-class': ['shiki twoslash-completion', classCopyIgnore, classFloatingPanel],
82+
'theme': floatingVueThemeCompletion,
8683
':shown': 'true',
87-
':triggers': '["click"]',
88-
':popper-triggers': '["click"]',
89-
':auto-hide': 'false',
9084
},
9185
children: [
9286
cursor,

‎packages/vitepress-plugin-twoslash/src/style.css

+15-14
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
--twoslash-docs-color: var(--vp-c-text-1);
55
--twoslash-docs-font: var(--vp-font-family-base);
66
--twoslash-code-font: var(--vp-font-family-mono);
7+
--twoslash-code-size: var(--vp-code-font-size);
78
--twoslash-underline-color: #8888;
89
--twoslash-border-color: var(--vp-c-border);
910
--twoslash-cursor-color: var(--vp-c-brand);
1011
--twoslash-matched-color: var(--vp-c-brand);
12+
--twoslash-unmatched-color: var(--vp-c-text-2);
1113
}
1214

1315
.v-popper--theme-twoslash {
@@ -44,20 +46,19 @@
4446
color: var(--twoslash-unmatched-color) !important;
4547
}
4648

47-
.floating-vue-twoslash .twoslash-popup-code {
49+
.twoslash-floating .twoslash-popup-code {
4850
max-width: 600px;
4951
display: block;
5052
width: fit-content;
5153
min-width: 100%;
5254
padding: 6px 12px;
5355
line-height: var(--vp-code-line-height);
54-
font-size: var(--vp-code-font-size);
55-
color: var(--vp-code-block-color);
56+
font-size: var(--twoslash-code-size);
5657
transition: color 0.5s;
5758
white-space: pre-wrap;
5859
}
5960

60-
.floating-vue-twoslash .twoslash-popup-docs {
61+
.twoslash-floating .twoslash-popup-docs {
6162
border-top: 1px solid var(--twoslash-border-color);
6263
color: var(--twoslash-docs-color);
6364
padding: 0px 12px 0px 12px !important;
@@ -70,29 +71,29 @@
7071
text-wrap: balance;
7172
}
7273

73-
.floating-vue-twoslash .twoslash-popup-docs p {
74+
.twoslash-floating .twoslash-popup-docs p {
7475
margin: 0;
7576
padding: 6px 0;
7677
text-wrap: balance;
7778
}
7879

79-
.floating-vue-twoslash .twoslash-popup-docs pre {
80+
.twoslash-floating .twoslash-popup-docs pre {
8081
background-color: var(--vp-code-block-bg);
8182
border-radius: 8px;
8283
padding: 12px;
8384
margin: 6px -2px;
8485
overflow-x: auto;
8586
}
8687

87-
.floating-vue-twoslash .twoslash-popup-docs-tags {
88+
.twoslash-floating .twoslash-popup-docs-tags {
8889
display: flex;
8990
flex-direction: column;
9091
padding: 8px 12px !important;
9192
}
9293

93-
.floating-vue-twoslash .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
94+
.twoslash-floating .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
9495
font-family: var(--twoslash-code-font);
95-
color: var(--vp-c-text-2);
96+
color: var(--twoslash-unmatched-color);
9697
margin-right: 0.5em;
9798
}
9899

@@ -105,16 +106,16 @@
105106
user-select: none;
106107
}
107108

108-
.floating-vue-twoslash-compeltion .v-popper__arrow-container {
109+
.twoslash-floating.twoslash-completion .v-popper__arrow-container {
109110
display: none;
110111
}
111112

112-
.floating-vue-twoslash-compeltion .twoslash-completion-list {
113+
.twoslash-floating.twoslash-completion .twoslash-completion-list {
113114
padding: 6px;
114-
font-family: var(--vp-font-family-mono);
115-
font-size: var(--vp-code-font-size) !important;
115+
font-family: var(--twoslash-code-font);
116+
font-size: var(--twoslash-code-size) !important;
116117
}
117118

118-
.floating-vue-twoslash-compeltion .twoslash-completion-list li {
119+
.twoslash-floating.twoslash-completion .twoslash-completion-list li {
119120
padding: 3px 0;
120121
}

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

+11-20
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,8 @@
9292
"tagName": "v-menu",
9393
"properties": {
9494
"class": "twoslash-hover",
95-
"popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
96-
"placement": "bottom-start",
97-
"theme": "twoslash",
98-
":arrow-padding": "8",
99-
":auto-boundary-max-size": "true"
95+
"popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
96+
"theme": "twoslash"
10097
},
10198
"children": [
10299
{
@@ -396,11 +393,8 @@
396393
"tagName": "v-menu",
397394
"properties": {
398395
"class": "twoslash-hover",
399-
"popper-class": "vp-code shiki floating-vue-twoslash vp-copy-ignore",
400-
"placement": "bottom-start",
401-
"theme": "twoslash",
402-
":arrow-padding": "8",
403-
":auto-boundary-max-size": "true"
396+
"popper-class": "shiki twoslash-floating vp-copy-ignore vp-code",
397+
"theme": "twoslash"
404398
},
405399
"children": [
406400
{
@@ -566,16 +560,13 @@
566560
"type": "element",
567561
"tagName": "v-menu",
568562
"properties": {
569-
"popper-class": "vp-code shiki floating-vue-twoslash-compeltion vp-copy-ignore",
570-
"placement": "bottom-start",
571-
"theme": "twoslash",
572-
":distance": "0",
573-
":arrow-overflow": "true",
574-
":auto-boundary-max-size": "true",
575-
":shown": "true",
576-
":triggers": "[\"click\"]",
577-
":popper-triggers": "[\"click\"]",
578-
":auto-hide": "false"
563+
"popper-class": [
564+
"shiki twoslash-completion",
565+
"vp-copy-ignore",
566+
"twoslash-floating"
567+
],
568+
"theme": "twoslash-completion",
569+
":shown": "true"
579570
},
580571
"children": [
581572
{

0 commit comments

Comments
 (0)