@shikijs/vitepress-twoslash 1.0.0-beta.5 → 1.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +21 -3
- package/package.json +4 -4
- package/style-core.css +23 -10
- package/style.css +53 -13
package/dist/index.d.mts
CHANGED
|
@@ -25,7 +25,7 @@ interface VitePressPluginTwoslashOptions extends TransformerTwoslashOptions, Two
|
|
|
25
25
|
* Requires adding `twoslash` to the code block explicitly to run twoslash
|
|
26
26
|
* @default true
|
|
27
27
|
*/
|
|
28
|
-
explicitTrigger?:
|
|
28
|
+
explicitTrigger?: TransformerTwoslashOptions['explicitTrigger'];
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* Create a Shiki transformer for VitePress to enable twoslash integration
|
package/dist/index.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ interface VitePressPluginTwoslashOptions extends TransformerTwoslashOptions, Two
|
|
|
25
25
|
* Requires adding `twoslash` to the code block explicitly to run twoslash
|
|
26
26
|
* @default true
|
|
27
27
|
*/
|
|
28
|
-
explicitTrigger?:
|
|
28
|
+
explicitTrigger?: TransformerTwoslashOptions['explicitTrigger'];
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* Create a Shiki transformer for VitePress to enable twoslash integration
|
package/dist/index.mjs
CHANGED
|
@@ -16,6 +16,9 @@ function rendererFloatingVue(options = {}) {
|
|
|
16
16
|
floatingVueThemeQuery = "twoslash-query",
|
|
17
17
|
floatingVueThemeCompletion = "twoslash-completion"
|
|
18
18
|
} = options.floatingVue || {};
|
|
19
|
+
const {
|
|
20
|
+
errorRendering = "line"
|
|
21
|
+
} = options;
|
|
19
22
|
const hoverBasicProps = {
|
|
20
23
|
"class": "twoslash-hover",
|
|
21
24
|
"popper-class": ["shiki", classFloatingPanel, classCopyIgnore, classCode].join(" "),
|
|
@@ -68,6 +71,17 @@ function rendererFloatingVue(options = {}) {
|
|
|
68
71
|
popupDocsTags: {
|
|
69
72
|
class: `twoslash-popup-docs twoslash-popup-docs-tags ${classMarkdown}`
|
|
70
73
|
},
|
|
74
|
+
popupError: {
|
|
75
|
+
class: `twoslash-popup-error ${classMarkdown}`
|
|
76
|
+
},
|
|
77
|
+
errorToken: errorRendering === "line" ? void 0 : {
|
|
78
|
+
tagName: "v-menu",
|
|
79
|
+
properties: {
|
|
80
|
+
...hoverBasicProps,
|
|
81
|
+
class: "twoslash-error twoslash-error-hover"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
errorCompose: compose,
|
|
71
85
|
completionCompose({ popup, cursor }) {
|
|
72
86
|
return [
|
|
73
87
|
{
|
|
@@ -144,14 +158,18 @@ function renderMarkdownInline(md, context) {
|
|
|
144
158
|
}
|
|
145
159
|
|
|
146
160
|
function transformerTwoslash(options = {}) {
|
|
161
|
+
const {
|
|
162
|
+
explicitTrigger = true
|
|
163
|
+
} = options;
|
|
147
164
|
const twoslash = createTransformerFactory(
|
|
148
165
|
createTwoslasher()
|
|
149
166
|
)({
|
|
150
167
|
langs: ["ts", "tsx", "js", "jsx", "json", "vue"],
|
|
151
|
-
explicitTrigger: true,
|
|
152
168
|
renderer: rendererFloatingVue(options),
|
|
153
|
-
...options
|
|
169
|
+
...options,
|
|
170
|
+
explicitTrigger
|
|
154
171
|
});
|
|
172
|
+
const trigger = explicitTrigger instanceof RegExp ? explicitTrigger : /\btwoslash\b/;
|
|
155
173
|
return {
|
|
156
174
|
...twoslash,
|
|
157
175
|
name: "@shikijs/vitepress-twoslash",
|
|
@@ -159,7 +177,7 @@ function transformerTwoslash(options = {}) {
|
|
|
159
177
|
const cleanup = options2.transformers?.find((i) => i.name === "vitepress:clean-up");
|
|
160
178
|
if (cleanup)
|
|
161
179
|
options2.transformers?.splice(options2.transformers.indexOf(cleanup), 1);
|
|
162
|
-
if (options2.meta?.__raw?.
|
|
180
|
+
if (!explicitTrigger || options2.meta?.__raw?.match(trigger)) {
|
|
163
181
|
const vPre = options2.transformers?.find((i) => i.name === "vitepress:v-pre");
|
|
164
182
|
if (vPre)
|
|
165
183
|
options2.transformers?.splice(options2.transformers.indexOf(vPre), 1);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shikijs/vitepress-twoslash",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.0-
|
|
4
|
+
"version": "1.0.0-rc.0",
|
|
5
5
|
"description": "Enable Twoslash support in VitePress",
|
|
6
6
|
"author": "Anthony Fu <anthonyfu117@hotmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
"mdast-util-from-markdown": "^2.0.0",
|
|
53
53
|
"mdast-util-gfm": "^3.0.0",
|
|
54
54
|
"mdast-util-to-hast": "^13.1.0",
|
|
55
|
-
"twoslash-vue": "^0.1.
|
|
55
|
+
"twoslash-vue": "^0.1.1",
|
|
56
56
|
"vue": "^3.4.15",
|
|
57
|
-
"@shikijs/twoslash": "1.0.0-
|
|
58
|
-
"shiki": "1.0.0-
|
|
57
|
+
"@shikijs/twoslash": "1.0.0-rc.0",
|
|
58
|
+
"shiki": "1.0.0-rc.0"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "unbuild",
|
package/style-core.css
CHANGED
|
@@ -12,11 +12,6 @@
|
|
|
12
12
|
--twoslash-unmatched-color: var(--vp-c-text-2);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.twoslash-error-line,
|
|
16
|
-
.twoslash-tag-line {
|
|
17
|
-
width: max-content;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
15
|
.v-popper--theme-twoslash {
|
|
21
16
|
z-index: calc(var(--vp-z-index-local-nav) - 1);
|
|
22
17
|
}
|
|
@@ -63,9 +58,8 @@
|
|
|
63
58
|
white-space: pre-wrap;
|
|
64
59
|
}
|
|
65
60
|
|
|
66
|
-
.twoslash-floating .twoslash-popup-docs
|
|
67
|
-
|
|
68
|
-
color: var(--twoslash-docs-color);
|
|
61
|
+
.twoslash-floating .twoslash-popup-docs,
|
|
62
|
+
.twoslash-floating .twoslash-popup-error {
|
|
69
63
|
padding: 0px 12px 0px 12px !important;
|
|
70
64
|
font-family: var(--twoslash-docs-font);
|
|
71
65
|
font-size: 0.9em;
|
|
@@ -76,13 +70,32 @@
|
|
|
76
70
|
text-wrap: balance;
|
|
77
71
|
}
|
|
78
72
|
|
|
79
|
-
.twoslash-floating .twoslash-popup-docs
|
|
73
|
+
.twoslash-floating .twoslash-popup-docs {
|
|
74
|
+
border-top: 1px solid var(--twoslash-border-color);
|
|
75
|
+
color: var(--twoslash-docs-color);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.twoslash-floating .twoslash-popup-error {
|
|
79
|
+
color: var(--twoslash-error-color);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.twoslash-floating .twoslash-popup-error.twoslash-error-level-warning {
|
|
83
|
+
color: var(--twoslash-warn-color);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.twoslash-floating .twoslash-popup-docs p,
|
|
87
|
+
.twoslash-floating .twoslash-popup-error p {
|
|
80
88
|
margin: 0;
|
|
81
89
|
padding: 6px 0;
|
|
82
90
|
text-wrap: balance;
|
|
83
91
|
}
|
|
84
92
|
|
|
85
|
-
.twoslash-floating
|
|
93
|
+
.twoslash-floating
|
|
94
|
+
.twoslash-popup-docs
|
|
95
|
+
pre
|
|
96
|
+
.twoslash-floating
|
|
97
|
+
.twoslash-popup-error
|
|
98
|
+
pre {
|
|
86
99
|
background-color: var(--vp-code-block-bg);
|
|
87
100
|
border-radius: 8px;
|
|
88
101
|
padding: 12px;
|
package/style.css
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
--twoslash-highlighted-bg: #c37d0d20;
|
|
12
12
|
--twoslash-popup-bg: #f8f8f8;
|
|
13
13
|
--twoslash-popup-color: inherit;
|
|
14
|
-
--twoslash-popup-shadow: rgba(0, 0, 0.08) 0px 1px 4px;
|
|
14
|
+
--twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
|
|
15
15
|
--twoslash-docs-color: #888;
|
|
16
16
|
--twoslash-docs-font: sans-serif;
|
|
17
17
|
--twoslash-code-font: inherit;
|
|
@@ -21,10 +21,12 @@
|
|
|
21
21
|
--twoslash-cursor-color: #8888;
|
|
22
22
|
--twoslash-error-color: #d45656;
|
|
23
23
|
--twoslash-error-bg: #d4565620;
|
|
24
|
+
--twoslash-warn-color: #c37d0d;
|
|
25
|
+
--twoslash-warn-bg: #c37d0d20;
|
|
24
26
|
--twoslash-tag-color: #3772cf;
|
|
25
27
|
--twoslash-tag-bg: #3772cf20;
|
|
26
|
-
--twoslash-tag-warn-color:
|
|
27
|
-
--twoslash-tag-warn-bg:
|
|
28
|
+
--twoslash-tag-warn-color: var(--twoslash-warn-color);
|
|
29
|
+
--twoslash-tag-warn-bg: var(--twoslash-warn-bg);
|
|
28
30
|
--twoslash-tag-annotate-color: #1ba673;
|
|
29
31
|
--twoslash-tag-annotate-bg: #1ba67320;
|
|
30
32
|
}
|
|
@@ -72,6 +74,7 @@
|
|
|
72
74
|
}
|
|
73
75
|
|
|
74
76
|
.twoslash .twoslash-hover:hover .twoslash-popup-container,
|
|
77
|
+
.twoslash .twoslash-error-hover:hover .twoslash-popup-container,
|
|
75
78
|
.twoslash .twoslash-query-presisted .twoslash-popup-container {
|
|
76
79
|
opacity: 1;
|
|
77
80
|
pointer-events: auto;
|
|
@@ -95,6 +98,7 @@
|
|
|
95
98
|
}
|
|
96
99
|
|
|
97
100
|
.twoslash .twoslash-popup-code,
|
|
101
|
+
.twoslash .twoslash-popup-error,
|
|
98
102
|
.twoslash .twoslash-popup-docs {
|
|
99
103
|
padding: 6px 8px !important;
|
|
100
104
|
}
|
|
@@ -111,6 +115,13 @@
|
|
|
111
115
|
border-top: 1px solid var(--twoslash-border-color);
|
|
112
116
|
}
|
|
113
117
|
|
|
118
|
+
.twoslash .twoslash-popup-error {
|
|
119
|
+
color: var(--twoslash-error-color);
|
|
120
|
+
background-color: var(--twoslash-error-bg);
|
|
121
|
+
font-family: var(--twoslash-docs-font);
|
|
122
|
+
font-size: 0.8em;
|
|
123
|
+
}
|
|
124
|
+
|
|
114
125
|
.twoslash .twoslash-popup-docs-tags {
|
|
115
126
|
display: flex;
|
|
116
127
|
flex-direction: column;
|
|
@@ -134,6 +145,14 @@
|
|
|
134
145
|
color: var(--twoslash-error-color);
|
|
135
146
|
padding: 6px 12px;
|
|
136
147
|
margin: 0.2em 0;
|
|
148
|
+
min-width: 100%;
|
|
149
|
+
width: max-content;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.twoslash .twoslash-error-line.twoslash-error-level-warning {
|
|
153
|
+
background-color: var(--twoslash-warn-bg);
|
|
154
|
+
border-left: 3px solid var(--twoslash-warn-color);
|
|
155
|
+
color: var(--twoslash-warn-color);
|
|
137
156
|
}
|
|
138
157
|
|
|
139
158
|
.twoslash .twoslash-error {
|
|
@@ -142,6 +161,12 @@
|
|
|
142
161
|
padding-bottom: 2px;
|
|
143
162
|
}
|
|
144
163
|
|
|
164
|
+
.twoslash .twoslash-error.twoslash-error-level-warning {
|
|
165
|
+
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c37d0d'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
|
|
166
|
+
repeat-x bottom left;
|
|
167
|
+
padding-bottom: 2px;
|
|
168
|
+
}
|
|
169
|
+
|
|
145
170
|
/* ===== Completeions ===== */
|
|
146
171
|
.twoslash .twoslash-completion-cursor {
|
|
147
172
|
position: relative;
|
|
@@ -232,6 +257,8 @@
|
|
|
232
257
|
display: flex;
|
|
233
258
|
align-items: center;
|
|
234
259
|
gap: 0.3em;
|
|
260
|
+
min-width: 100%;
|
|
261
|
+
width: max-content;
|
|
235
262
|
}
|
|
236
263
|
|
|
237
264
|
.twoslash .twoslash-tag-line .twoslash-tag-icon {
|
|
@@ -273,11 +300,6 @@
|
|
|
273
300
|
--twoslash-unmatched-color: var(--vp-c-text-2);
|
|
274
301
|
}
|
|
275
302
|
|
|
276
|
-
.twoslash-error-line,
|
|
277
|
-
.twoslash-tag-line {
|
|
278
|
-
width: max-content;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
303
|
.v-popper--theme-twoslash {
|
|
282
304
|
z-index: calc(var(--vp-z-index-local-nav) - 1);
|
|
283
305
|
}
|
|
@@ -324,9 +346,8 @@
|
|
|
324
346
|
white-space: pre-wrap;
|
|
325
347
|
}
|
|
326
348
|
|
|
327
|
-
.twoslash-floating .twoslash-popup-docs
|
|
328
|
-
|
|
329
|
-
color: var(--twoslash-docs-color);
|
|
349
|
+
.twoslash-floating .twoslash-popup-docs,
|
|
350
|
+
.twoslash-floating .twoslash-popup-error {
|
|
330
351
|
padding: 0px 12px 0px 12px !important;
|
|
331
352
|
font-family: var(--twoslash-docs-font);
|
|
332
353
|
font-size: 0.9em;
|
|
@@ -337,13 +358,32 @@
|
|
|
337
358
|
text-wrap: balance;
|
|
338
359
|
}
|
|
339
360
|
|
|
340
|
-
.twoslash-floating .twoslash-popup-docs
|
|
361
|
+
.twoslash-floating .twoslash-popup-docs {
|
|
362
|
+
border-top: 1px solid var(--twoslash-border-color);
|
|
363
|
+
color: var(--twoslash-docs-color);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.twoslash-floating .twoslash-popup-error {
|
|
367
|
+
color: var(--twoslash-error-color);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.twoslash-floating .twoslash-popup-error.twoslash-error-level-warning {
|
|
371
|
+
color: var(--twoslash-warn-color);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.twoslash-floating .twoslash-popup-docs p,
|
|
375
|
+
.twoslash-floating .twoslash-popup-error p {
|
|
341
376
|
margin: 0;
|
|
342
377
|
padding: 6px 0;
|
|
343
378
|
text-wrap: balance;
|
|
344
379
|
}
|
|
345
380
|
|
|
346
|
-
.twoslash-floating
|
|
381
|
+
.twoslash-floating
|
|
382
|
+
.twoslash-popup-docs
|
|
383
|
+
pre
|
|
384
|
+
.twoslash-floating
|
|
385
|
+
.twoslash-popup-error
|
|
386
|
+
pre {
|
|
347
387
|
background-color: var(--vp-code-block-bg);
|
|
348
388
|
border-radius: 8px;
|
|
349
389
|
padding: 12px;
|