@shikijs/twoslash 1.6.1 → 1.6.3

package/dist/core.d.mts

@@ -139,6 +139,13 @@ interface RendererRichOptions {
      * By default it pass-through the markdown.
      */
     renderMarkdownInline?: (this: ShikiTransformerContextCommon, markdown: string, context: string) => ElementContent[];
+    /**
+     * The way query should be rendered.
+     * - `'popup'`: Render the query in the absolute popup
+     * - `'line'`: Render the query line after the line of code
+     * @default 'popup'
+     */
+    queryRendering?: 'popup' | 'line';
     /**
      * Extensions for the genreated HAST tree.
      */

package/dist/core.d.ts

@@ -139,6 +139,13 @@ interface RendererRichOptions {
      * By default it pass-through the markdown.
      */
     renderMarkdownInline?: (this: ShikiTransformerContextCommon, markdown: string, context: string) => ElementContent[];
+    /**
+     * The way query should be rendered.
+     * - `'popup'`: Render the query in the absolute popup
+     * - `'line'`: Render the query line after the line of code
+     * @default 'popup'
+     */
+    queryRendering?: 'popup' | 'line';
     /**
      * Extensions for the genreated HAST tree.
      */

package/dist/core.mjs

@@ -404,6 +404,7 @@ function rendererRich(options = {}) {
     classExtra = "",
     jsdoc = true,
     errorRendering = "line",
+    queryRendering = "popup",
     renderMarkdown = renderMarkdownPassThrough,
     renderMarkdownInline = renderMarkdownPassThrough,
     hast
@@ -529,6 +530,21 @@ function rendererRich(options = {}) {
       if (!query.text)
         return {};
       const themedContent = highlightPopupContent.call(this, query);
+      if (queryRendering !== "popup") {
+        return extend(
+          hast?.queryToken,
+          {
+            type: "element",
+            tagName: "span",
+            properties: {
+              class: "twoslash-hover"
+            },
+            children: [
+              node
+            ]
+          }
+        );
+      }
       const popup = extend(
         hast?.queryPopup,
         {
@@ -715,6 +731,42 @@ function rendererRich(options = {}) {
         )
       ];
     },
+    lineQuery(query, node) {
+      if (queryRendering !== "line")
+        return [];
+      const themedContent = highlightPopupContent.call(this, query);
+      const targetNode = node?.type === "element" ? node.children[0] : void 0;
+      const targetText = targetNode?.type === "text" ? targetNode.value : "";
+      const offset = Math.max(0, (query.character || 0) + Math.floor(targetText.length / 2) - 2);
+      return [
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: ["twoslash-meta-line twoslash-query-line", classExtra].filter(Boolean).join(" ")
+          },
+          children: [
+            { type: "text", value: " ".repeat(offset) },
+            {
+              type: "element",
+              tagName: "span",
+              properties: {
+                class: ["twoslash-popup-container", classExtra].filter(Boolean).join(" ")
+              },
+              children: [
+                {
+                  type: "element",
+                  tagName: "div",
+                  properties: { class: "twoslash-popup-arrow" },
+                  children: []
+                },
+                ...themedContent
+              ]
+            }
+          ]
+        }
+      ];
+    },
     lineError(error) {
       if (errorRendering !== "line")
         return [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shikijs/twoslash",
   "type": "module",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Shiki transformer for twoslash",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -50,10 +50,10 @@
   ],
   "dependencies": {
     "twoslash": "^0.2.6",
-    "@shikijs/core": "1.6.1"
+    "@shikijs/core": "1.6.3"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.34",
+    "@iconify-json/carbon": "^1.1.35",
     "@iconify-json/codicon": "^1.1.49",
     "@shikijs/twoslash": "^3.1.2",
     "hast-util-from-html": "^2.0.1",

package/style-rich.css

@@ -70,7 +70,8 @@
 
 .twoslash .twoslash-hover:hover .twoslash-popup-container,
 .twoslash .twoslash-error-hover:hover .twoslash-popup-container,
-.twoslash .twoslash-query-presisted .twoslash-popup-container {
+.twoslash .twoslash-query-presisted .twoslash-popup-container,
+.twoslash .twoslash-query-line .twoslash-popup-container {
   opacity: 1;
   pointer-events: auto;
 }
@@ -132,6 +133,13 @@
   font-family: var(--twoslash-code-font);
 }
 
+/* ===== Query Line ===== */
+.twoslash .twoslash-query-line .twoslash-popup-container {
+  position: relative;
+  margin-bottom: 1.4em;
+  transform: translateY(0.6em);
+}
+
 /* ===== Error Line ===== */
 .twoslash .twoslash-error-line {
   position: relative;