Add Twoslash support via transformer

Author: ricardonunez-io

.yarn/install-state.gz

@@ -69,6 +69,7 @@
   },
   "dependencies": {
     "@shikijs/transformers": "^3.11.0",
+    "@shikijs/twoslash": "^3.12.2",
     "hast-util-to-string": "^3.0.1",
     "mdast-util-mdx-jsx": "^3.2.0",
     "next-mdx-remote-client": "^1.0.3",
@@ -77,6 +78,7 @@
     "remark-math": "^6.0.0",
     "remark-smartypants": "^3.0.2",
     "shiki": "^3.11.0",
+    "twoslash-cdn": "^0.3.4",
     "unified": "^11.0.0",
     "unist-util-visit": "^5.0.0"
   }

packages/mdx/package.json

@@ -1,7 +1,15 @@
+import {
+  createTransformerFactory,
+  rendererRich,
+  transformerTwoslash,
+  type TransformerTwoslashOptions,
+} from '@shikijs/twoslash';
 import type { Element, Root } from 'hast';
 import { toString } from 'hast-util-to-string';
 import type { MdxJsxFlowElementHast, MdxJsxTextElementHast } from 'mdast-util-mdx-jsx';
 import { createHighlighter, type Highlighter } from 'shiki';
+import { createTwoslashFromCDN } from 'twoslash-cdn';
+import ts from 'typescript';
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
@@ -21,6 +29,28 @@ import {
 } from './shiki-constants.js';
 import { getLanguage } from './utils.js';
 
+const twoslashCompilerOptions = {
+  target: ts.ScriptTarget.ESNext,
+  lib: ['ESNext', 'DOM', 'esnext', 'dom', 'es2020'],
+};
+
+const twoslashOptions: TransformerTwoslashOptions = {
+  onTwoslashError(err, code, lang) {
+    console.error(JSON.stringify({ err, code, lang }));
+  },
+  onShikiError(err, code, lang) {
+    console.error(JSON.stringify({ err, code, lang }));
+  },
+  renderer: rendererRich(),
+  langs: ['ts', 'typescript', 'js', 'javascript', 'tsx', 'jsx'],
+  explicitTrigger: true,
+  twoslashOptions: { compilerOptions: twoslashCompilerOptions },
+};
+
+const cdnTwoslash = createTwoslashFromCDN({ compilerOptions: twoslashCompilerOptions });
+
+const cdnTransformerTwoslash = createTransformerFactory(cdnTwoslash.runSync);
+
 export type RehypeSyntaxHighlightingOptions = {
   theme?: ShikiTheme;
   themes?: Record<'light' | 'dark', ShikiTheme>;
@@ -90,15 +120,17 @@ export const rehypeSyntaxHighlighting: Plugin<[RehypeSyntaxHighlightingOptions?]
         getLanguage(child, DEFAULT_LANG_ALIASES) ??
         DEFAULT_LANG;
 
-      if (!DEFAULT_LANGS.includes(lang)) {
-        asyncNodesToProcess.push(
-          highlighter.loadLanguage(lang).then(() => {
+      asyncNodesToProcess.push(
+        (async () => {
+          await cdnTwoslash.prepareTypes(toString(node));
+          if (!DEFAULT_LANGS.includes(lang)) {
+            await highlighter.loadLanguage(lang);
             traverseNode(node, index, parent, highlighter, lang, options);
-          })
-        );
-      } else {
-        traverseNode(node, index, parent, highlighter, lang, options);
-      }
+          } else {
+            traverseNode(node, index, parent, highlighter, lang, options);
+          }
+        })()
+      );
     });
     await Promise.all(asyncNodesToProcess);
   };
@@ -127,7 +159,11 @@ const traverseNode = (
       colorReplacements: shikiColorReplacements,
       tabindex: false,
       tokenizeMaxLineLength: 1000,
-      transformers: SHIKI_TRANSFORMERS,
+      transformers: [
+        ...SHIKI_TRANSFORMERS,
+        transformerTwoslash(twoslashOptions),
+        cdnTransformerTwoslash(twoslashOptions),
+      ],
     });
 
     const codeElement = hast.children[0] as Element;

packages/mdx/src/plugins/rehype/rehypeSyntaxHighlighting.ts

@@ -434,6 +434,7 @@ __metadata:
     "@mintlify/prettier-config": "npm:^1.0.1"
     "@mintlify/ts-config": "npm:^2.0.2"
     "@shikijs/transformers": "npm:^3.11.0"
+    "@shikijs/twoslash": "npm:^3.12.2"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"
     "@tsconfig/recommended": "npm:1.x"
     "@types/hast": "npm:^3.0.4"
@@ -458,6 +459,7 @@ __metadata:
     remark-smartypants: "npm:^3.0.2"
     rimraf: "npm:^5.0.1"
     shiki: "npm:^3.11.0"
+    twoslash-cdn: "npm:^0.3.4"
     typescript: "npm:^5.7.2"
     unified: "npm:^11.0.0"
     unist-util-visit: "npm:^5.0.0"
@@ -655,6 +657,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/core@npm:3.12.2":
+  version: 3.12.2
+  resolution: "@shikijs/core@npm:3.12.2"
+  dependencies:
+    "@shikijs/types": "npm:3.12.2"
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+    "@types/hast": "npm:^3.0.4"
+    hast-util-to-html: "npm:^9.0.5"
+  checksum: 10c0/3a05bc0a316a8a0170996ffe5dfc76021d20a459ed2c1aa5e659468a1a65af1cf0f69415535ecbd54387f4c61caf5d4b4e88b8fde21caf6af649d4178da52092
+  languageName: node
+  linkType: hard
+
 "@shikijs/engine-javascript@npm:3.11.0":
   version: 3.11.0
   resolution: "@shikijs/engine-javascript@npm:3.11.0"
@@ -704,6 +718,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/twoslash@npm:^3.12.2":
+  version: 3.12.2
+  resolution: "@shikijs/twoslash@npm:3.12.2"
+  dependencies:
+    "@shikijs/core": "npm:3.12.2"
+    "@shikijs/types": "npm:3.12.2"
+    twoslash: "npm:^0.3.4"
+  peerDependencies:
+    typescript: ">=5.5.0"
+  checksum: 10c0/810808514c8e562585afb8e835cf2a214f26e9bf609c17bfb7faf0bae7b059d545384da715a12fa623f906388ff14db39984c3aad6a53ee191475b158b0f7651
+  languageName: node
+  linkType: hard
+
 "@shikijs/types@npm:3.11.0":
   version: 3.11.0
   resolution: "@shikijs/types@npm:3.11.0"
@@ -714,6 +741,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/types@npm:3.12.2":
+  version: 3.12.2
+  resolution: "@shikijs/types@npm:3.12.2"
+  dependencies:
+    "@shikijs/vscode-textmate": "npm:^10.0.2"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/74622ac69a84f0d7b66f6f9253bdaa0fee69b7bc97d5f85e12b2a70a9d77d2b04fdbccf65fcd9460449340a214594cb945fee8b3d2c091175e58e8cdf2cb2920
+  languageName: node
+  linkType: hard
+
 "@shikijs/vscode-textmate@npm:^10.0.2":
   version: 10.0.2
   resolution: "@shikijs/vscode-textmate@npm:10.0.2"
@@ -1143,6 +1180,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript/vfs@npm:^1.6.1":
+  version: 1.6.1
+  resolution: "@typescript/vfs@npm:1.6.1"
+  dependencies:
+    debug: "npm:^4.1.1"
+  peerDependencies:
+    typescript: "*"
+  checksum: 10c0/3878686aff4bf26813dad9242aa8e01c5c9734f4d37f31035f93e9c8b850f15ec6a4480f04cf3a3a1cbf78a4e796ae1be5d6c54f7f7c91556eafee913a8d0da4
+  languageName: node
+  linkType: hard
+
 "@ungap/structured-clone@npm:^1.0.0":
   version: 1.2.1
   resolution: "@ungap/structured-clone@npm:1.2.1"
@@ -6745,6 +6793,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"twoslash-cdn@npm:^0.3.4":
+  version: 0.3.4
+  resolution: "twoslash-cdn@npm:0.3.4"
+  dependencies:
+    twoslash: "npm:0.3.4"
+  peerDependencies:
+    typescript: ^5.5.0
+  checksum: 10c0/dc3bd3d54319f80a7c34057847522e1d5dffaec08c1d1195ea0f16aef73325576c9c3bf60eff10ce7233594c5ab980f68c3c82742d97d4c4b450ac160364a323
+  languageName: node
+  linkType: hard
+
+"twoslash-protocol@npm:0.3.4":
+  version: 0.3.4
+  resolution: "twoslash-protocol@npm:0.3.4"
+  checksum: 10c0/4062a0dced5e8bca37db0b759cbb08f13b00d13572cd676686d139d436ec324d9b1ca959cf0929683b987b090c62ad52f02c8948919e89f8ab76e5502eb1e309
+  languageName: node
+  linkType: hard
+
+"twoslash@npm:0.3.4, twoslash@npm:^0.3.4":
+  version: 0.3.4
+  resolution: "twoslash@npm:0.3.4"
+  dependencies:
+    "@typescript/vfs": "npm:^1.6.1"
+    twoslash-protocol: "npm:0.3.4"
+  peerDependencies:
+    typescript: ^5.5.0
+  checksum: 10c0/1220393b48dce0e0f20c7c9ce2801864ee99dc052b1f78d884a5eb737052164511d26c8ca7652170475a3bff28afdf96a136132d074f8e35dee5d79d6208162c
+  languageName: node
+  linkType: hard
+
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"