feat(twoslash/rich): renders jsdoc

Author: antfu

packages/shikiji-twoslash/src/renderer-rich.ts

@@ -4,6 +4,13 @@ import type { CompletionItem } from './icons'
 import { defaultCompletionIcons, defaultCustomTagIcons } from './icons'
 
 export interface RendererRichOptions {
+  /**
+   * Render JSDoc comments in hover popup.
+   *
+   * @default true
+   */
+  jsdoc?: boolean
+
   /**
    * Custom icons for completion items.
    * A map from completion item kind to a HAST node.
@@ -44,6 +51,7 @@ export function rendererRich(options: RendererRichOptions = {}): TwoSlashRendere
     customTagIcons = defaultCustomTagIcons,
     formatInfo = info => info,
     classExtra = '',
+    jsdoc = true,
   } = options
   return {
     nodeStaticInfo(info, node) {
@@ -53,6 +61,20 @@ export function rendererRich(options: RendererRichOptions = {}): TwoSlashRendere
         transforms: undefined,
       }).children[0] as Element).children[0] as Element).children
 
+      if (jsdoc && info.docs) {
+        themedContent.push({
+          type: 'element',
+          tagName: 'div',
+          properties: { class: 'twoslash-popup-jsdoc' },
+          children: [
+            {
+              type: 'text',
+              value: info.docs,
+            },
+          ],
+        })
+      }
+
       return {
         type: 'element',
         tagName: 'span',

packages/shikiji-twoslash/style-rich.css

@@ -1,6 +1,7 @@
 /* ===== Basic ===== */
 :root {
   --twoslash-border-color: #8888;
+  --twoslash-jsdoc-color: #888;
   --twoslash-underline-color: currentColor;
   --twoslash-popup-bg: #f8f8f8;
   --twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
@@ -81,6 +82,14 @@
   pointer-events: none;
 }
 
+.twoslash .twoslash-popup-jsdoc {
+  color: var(--twoslash-jsdoc-color);
+  padding-top: 6px;
+  padding-bottom: 2px;
+  font-family: sans-serif;
+  font-size: 0.8em;
+}
+
 /* ===== Error Line ===== */
 .twoslash .twoslash-error-line {
   position: relative;