Remove globals

Author: ricardonunez-io

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

@@ -23,7 +23,6 @@ import {
   getTwoslashOptions,
   parseLineComment,
   getCdnTwoslashTransformer,
-  cdnTwoslash,
 } from './twoslash/config.js';
 import { getLanguage } from './utils.js';
 
@@ -148,9 +147,8 @@ async function traverseNode({
 
     code = splitCode.join('\n');
 
-    await cdnTwoslash.init();
-    await cdnTwoslash.prepareTypes(code);
     const twoslashOptions = getTwoslashOptions({ linkMap });
+    const cdnTwoslashTransformer = await getCdnTwoslashTransformer(code, twoslashOptions);
 
     const hast = highlighter.codeToHast(code, {
       lang: lang ?? DEFAULT_LANG,
@@ -165,7 +163,7 @@ async function traverseNode({
       colorReplacements: shikiColorReplacements,
       tabindex: false,
       tokenizeMaxLineLength: 1000,
-      transformers: [...SHIKI_TRANSFORMERS, getCdnTwoslashTransformer(twoslashOptions)],
+      transformers: [...SHIKI_TRANSFORMERS, cdnTwoslashTransformer],
     });
 
     const codeElement = hast.children[0] as Element;

packages/mdx/src/plugins/rehype/twoslash/config.ts

@@ -5,12 +5,10 @@ import {
 } from '@shikijs/twoslash';
 import type { ElementContent } from 'hast';
 import type { ShikiTransformer } from 'shiki/types';
-import { createTwoslasher, type TwoslashInstance } from 'twoslash';
+import { type TwoslashInstance } from 'twoslash';
 import { createTwoslashFromCDN, TwoslashCdnReturn } from 'twoslash-cdn';
 import * as ts from 'typescript';
 
-type TransformerFactory = (options?: TransformerTwoslashOptions) => ShikiTransformer;
-
 const twoslashCompilerOptions: ts.CompilerOptions = {
   target: ts.ScriptTarget.ESNext,
   lib: ['ESNext', 'DOM', 'esnext', 'dom', 'es2020'],
@@ -20,29 +18,15 @@ const twoslashCompilerOptions: ts.CompilerOptions = {
   alwaysStrict: false,
 };
 
-const fsMap: Map<string, string> = new Map();
-const twoslashStorageMap = new Map();
-
-export const cdnTwoslash = createTwoslashFromCDN({
-  compilerOptions: twoslashCompilerOptions,
-  fsMap,
-  storage: {
-    getItemRaw(key) {
-      return twoslashStorageMap.get(key);
-    },
-    setItemRaw(key, value) {
-      twoslashStorageMap.set(key, value);
-    },
-  },
-});
-
 let cachedInstance: TwoslashCdnReturn | undefined;
 
-export const cdnTwoslashTransformer: TransformerFactory = createTransformerFactory(
-  cdnTwoslash.runSync
-);
+export async function getCdnTwoslashTransformer(
+  code: string,
+  options: TransformerTwoslashOptions
+): Promise<ShikiTransformer> {
+  const fsMap: Map<string, string> = new Map();
+  const twoslashStorageMap = new Map();
 
-export function getCdnTwoslashTransformer(options: TransformerTwoslashOptions): ShikiTransformer {
   function getInstance() {
     cachedInstance ??= createTwoslashFromCDN({
       compilerOptions: twoslashCompilerOptions,
@@ -59,6 +43,10 @@ export function getCdnTwoslashTransformer(options: TransformerTwoslashOptions):
     return cachedInstance;
   }
 
+  const instance = getInstance();
+  await instance.init();
+  await instance.prepareTypes(code);
+
   return createTransformerFactory(
     // lazy load Twoslash instance so it works on serverless platforms
     ((...args) => getInstance().runSync(...args)) as TwoslashInstance