@shikijs/vitepress-twoslash 1.0.0-beta.4 → 1.0.0-beta.6

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.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,14 @@ function rendererFloatingVue(options = {}) {
68
71
  popupDocsTags: {
69
72
  class: `twoslash-popup-docs twoslash-popup-docs-tags ${classMarkdown}`
70
73
  },
74
+ errorToken: errorRendering === "line" ? void 0 : {
75
+ tagName: "v-menu",
76
+ properties: {
77
+ ...hoverBasicProps,
78
+ class: "twoslash-error twoslash-error-hover"
79
+ }
80
+ },
81
+ errorCompose: compose,
71
82
  completionCompose({ popup, cursor }) {
72
83
  return [
73
84
  {
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-beta.4",
4
+ "version": "1.0.0-beta.6",
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.0",
55
+ "twoslash-vue": "^0.1.1",
56
56
  "vue": "^3.4.15",
57
- "shiki": "1.0.0-beta.4",
58
- "@shikijs/twoslash": "1.0.0-beta.4"
57
+ "@shikijs/twoslash": "1.0.0-beta.6",
58
+ "shiki": "1.0.0-beta.6"
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
- border-top: 1px solid var(--twoslash-border-color);
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 p {
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 .twoslash-popup-docs pre {
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: #c37d0d;
27
- --twoslash-tag-warn-bg: #c37d0d20;
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
- border-top: 1px solid var(--twoslash-border-color);
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 p {
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 .twoslash-popup-docs pre {
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;