feat(vitepress): support errorRendering hover

Author: antfu

docs/.vitepress/config.ts

@@ -112,12 +112,11 @@ export default withMermaid(defineConfig({
         },
       },
       transformerTwoslash({
+        // errorRendering: 'hover',
         processHoverInfo(info) {
           return defaultHoverInfoProcessor(info)
             // Remove shiki_core namespace
-            .replace(/shiki_core\./g, '')
-            // Remove member access
-            .replace(/^[a-zA-Z0-9_]*(\<[^\>]*\>)?\./, '')
+            .replace(/_shikijs_core[\w_]*\./g, '')
         },
       }),
       {

packages/twoslash/style-rich.css

@@ -140,6 +140,8 @@
   color: var(--twoslash-error-color);
   padding: 6px 12px;
   margin: 0.2em 0;
+  min-width: 100%;
+  width: max-content;
 }
 
 .twoslash .twoslash-error-line.twoslash-error-level-warning {
@@ -250,6 +252,8 @@
   display: flex;
   align-items: center;
   gap: 0.3em;
+  min-width: 100%;
+  width: max-content;
 }
 
 .twoslash .twoslash-tag-line .twoslash-tag-icon {

packages/vitepress-twoslash/src/index.ts

@@ -1,4 +1,4 @@
-import type { TransformerTwoslashOptions, TwoslashFunction } from '@shikijs/twoslash/core'
+import type { TransformerTwoslashOptions } from '@shikijs/twoslash/core'
 import { createTransformerFactory } from '@shikijs/twoslash/core'
 import { createTwoslasher } from 'twoslash-vue'
 import type { ShikiTransformer } from 'shiki'

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

@@ -37,6 +37,10 @@ export function rendererFloatingVue(options: TwoslashFloatingVueRendererOptions
     floatingVueThemeCompletion = 'twoslash-completion',
   } = options.floatingVue || {}
 
+  const {
+    errorRendering = 'line',
+  } = options
+
   const hoverBasicProps = {
     'class': 'twoslash-hover',
     'popper-class': ['shiki', classFloatingPanel, classCopyIgnore, classCode].join(' '),
@@ -91,6 +95,16 @@ export function rendererFloatingVue(options: TwoslashFloatingVueRendererOptions
       popupDocsTags: {
         class: `twoslash-popup-docs twoslash-popup-docs-tags ${classMarkdown}`,
       },
+      errorToken: errorRendering === 'line'
+        ? undefined
+        : {
+            tagName: 'v-menu',
+            properties: {
+              ...hoverBasicProps,
+              class: 'twoslash-error twoslash-error-hover',
+            },
+          },
+      errorCompose: compose,
       completionCompose({ popup, cursor }) {
         return [
           <Element>{

packages/vitepress-twoslash/src/style.css

@@ -12,11 +12,6 @@
   --twoslash-unmatched-color: var(--vp-c-text-2);
 }
 
-.twoslash-error-line,
-.twoslash-tag-line {
-  width: max-content;
-}
-
 .v-popper--theme-twoslash {
   z-index: calc(var(--vp-z-index-local-nav) - 1);
 }
@@ -63,9 +58,8 @@
   white-space: pre-wrap;
 }
 
-.twoslash-floating .twoslash-popup-docs {
-  border-top: 1px solid var(--twoslash-border-color);
-  color: var(--twoslash-docs-color);
+.twoslash-floating .twoslash-popup-docs,
+.twoslash-floating .twoslash-popup-error {
   padding: 0px 12px 0px 12px !important;
   font-family: var(--twoslash-docs-font);
   font-size: 0.9em;
@@ -76,13 +70,32 @@
   text-wrap: balance;
 }
 
-.twoslash-floating .twoslash-popup-docs p {
+.twoslash-floating .twoslash-popup-docs {
+  border-top: 1px solid var(--twoslash-border-color);
+  color: var(--twoslash-docs-color);
+}
+
+.twoslash-floating .twoslash-popup-error {
+  color: var(--twoslash-error-color);
+}
+
+.twoslash-floating .twoslash-popup-error.twoslash-error-level-warning {
+  color: var(--twoslash-warn-color);
+}
+
+.twoslash-floating .twoslash-popup-docs p,
+.twoslash-floating .twoslash-popup-error p {
   margin: 0;
   padding: 6px 0;
   text-wrap: balance;
 }
 
-.twoslash-floating .twoslash-popup-docs pre {
+.twoslash-floating
+  .twoslash-popup-docs
+  pre
+  .twoslash-floating
+  .twoslash-popup-error
+  pre {
   background-color: var(--vp-code-block-bg);
   border-radius: 8px;
   padding: 12px;