docs: use floating-vue to display type info (#62)

docs/.vitepress/config.ts

@@ -1,9 +1,10 @@
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
-import { rendererRich, transformerTwoSlash } from 'shikiji-twoslash'
+import { transformerTwoSlash } from 'shikiji-twoslash'
 import { bundledThemes } from 'shikiji'
 import { version } from '../../package.json'
 import vite from './vite.config'
+import { rendererFloatingVue } from './render-floating-vue'
 
 const GUIDES: DefaultTheme.NavItemWithLink[] = [
   { text: 'Getting Started', link: '/guide/' },
@@ -53,10 +54,16 @@ export default defineConfig({
     codeTransformers: [
       transformerTwoSlash({
         explicitTrigger: true,
-        renderer: rendererRich({
-          classExtra: 'vp-copy-ignore',
-        }),
+        renderer: rendererFloatingVue,
       }),
+      // HAST treat `template` element specially and ignore its children
+      // We need to render it as `vue-template` and use postprocess to replace it back
+      {
+        postprocess(code) {
+          return code
+            .replace(/(<\/?)vue-template/g, '$1template')
+        },
+      },
       {
         // Render custom themes with codeblocks
         name: 'shikiji:inline-theme',
@@ -92,11 +99,17 @@ export default defineConfig({
       },
       {
         name: 'shikiji:vitepress-patch',
-        preprocess(code, options) {
+        preprocess(_, options) {
           const cleanup = options.transformers?.find(i => i.name === 'vitepress:clean-up')
-          if (!cleanup)
-            return
-          options.transformers?.splice(options.transformers.indexOf(cleanup), 1)
+          if (cleanup)
+            options.transformers?.splice(options.transformers.indexOf(cleanup), 1)
+
+          // Disable v-pre for twoslash, because we need render it with FloatingVue
+          if (options.meta?.__raw?.includes('twoslash')) {
+            const vPre = options.transformers?.find(i => i.name === 'vitepress:v-pre')
+            if (vPre)
+              options.transformers?.splice(options.transformers.indexOf(vPre), 1)
+          }
         },
       },
       {

docs/.vitepress/render-floating-vue.ts

@@ -0,0 +1,61 @@
+import { rendererRich } from 'shikiji-twoslash'
+import type { TwoSlashRenderers } from 'shikiji-twoslash'
+import type { Element, Text } from 'hast'
+import type { ShikijiTransformerContext } from 'shikiji'
+
+const rich = rendererRich({
+  classExtra: 'vp-copy-ignore',
+})
+
+function createFloatingVueWarpper(this: ShikijiTransformerContext, text: string, node: Element | Text, presisted = false): Element {
+  const themedContent = (this.codeToHast(text, {
+    ...this.options,
+    transformers: [],
+    transforms: undefined,
+  }).children[0] as Element).children
+
+  return {
+    type: 'element',
+    tagName: 'v-menu',
+    properties: {
+      'class': 'twoslash-hover',
+      'popper-class': 'vp-code shiki floating-vue-twoslash vp-copy-ignore',
+      'placement': 'bottom-start',
+      ':arrow-padding': '8',
+      ...presisted && {
+        ':shown': 'true',
+        ':triggers': '[]',
+      },
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'span',
+        properties: {},
+        children: [
+          node,
+        ],
+      },
+      {
+        type: 'element',
+        tagName: 'vue-template',
+        properties: {
+          'v-slot:popper': '{}',
+        },
+        children: themedContent,
+      },
+    ],
+  }
+}
+
+export const rendererFloatingVue: TwoSlashRenderers = {
+  ...rich,
+  nodeStaticInfo(info, node) {
+    return createFloatingVueWarpper.call(this, info.text, node)
+  },
+  nodeQuery(query, node) {
+    if (!query.text)
+      return {}
+    return createFloatingVueWarpper.call(this, query.text, node, true)
+  },
+}

docs/.vitepress/theme/custom.css

@@ -25,3 +25,20 @@
 .twoslash-query-presisted .twoslash-popup-info {
   transform: translateY(1.8em);
 }
+
+.twoslash .v-popper {
+  display: inline-block;
+}
+
+.floating-vue-twoslash code {
+  max-width: 600px;
+  display: block;
+  padding: 6px 12px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-block-color);
+  transition: color 0.5s;
+  white-space: pre-wrap;
+}

docs/.vitepress/theme/index.ts

@@ -18,6 +18,8 @@ export default {
   },
   enhanceApp({ app }: any) {
     app.use(createPinia())
+
+    FloatingVue.options.themes.menu.delay = { show: 0, hide: 0 }
     app.use(FloatingVue)
   },
 }