@shikijs/vitepress-twoslash 3.11.0 → 3.12.0

package/dist/cache-fs.d.mts

@@ -1,8 +1,4 @@
-import { b as TwoslashTypesCache } from './shared/vitepress-twoslash.D_PyQzvF.mjs';
-import '@shikijs/twoslash/core';
-import 'twoslash';
-import 'twoslash-vue';
-import '@shikijs/twoslash';
+import { TwoslashTypesCache } from '@shikijs/twoslash';
 
 interface FileSystemTypeResultCacheOptions {
     /**

package/dist/cache-inline/index.d.mts

@@ -0,0 +1,48 @@
+import { UserConfig } from 'vitepress';
+import { V as VitePressPluginTwoslashOptions } from '../shared/vitepress-twoslash.CBxCru0j.mjs';
+import '@shikijs/twoslash/core';
+import 'twoslash-vue';
+import '@shikijs/twoslash';
+
+interface MarkdownFenceSourceMap {
+    path: string;
+    from: number;
+    to: number;
+}
+/**
+ * Maps markdown code to its source map positions.
+ * @param code markdown source
+ * @param path markdown file path
+ * @returns map of inject positions to source maps
+ */
+type MarkdownFencesSourceMapper = (code: string, path: string) => Map<number, MarkdownFenceSourceMap>;
+interface MarkdownFenceSourceMapCodec {
+    /**
+     * Injects source map data into the markdown source.
+     * @param code markdown source
+     * @param injects map of inject positions to source maps
+     * @returns markdown source with injected source maps
+     */
+    injectToMarkdown: (code: string, path: string) => string;
+    /**
+     * Extract source map from fence code snippet.
+     * @param code fence code snippet
+     * @returns extracted code and source map
+     */
+    extractFromFence: (code: string) => {
+        code: string;
+        sourceMap: MarkdownFenceSourceMap | null;
+    };
+}
+
+interface TwoslashInlineCacheOptions {
+    sourceMapper?: MarkdownFencesSourceMapper;
+    sourceMapCodec?: MarkdownFenceSourceMapCodec;
+}
+/**
+ * @experimental This API is experimental and may be changed in the future.
+ */
+declare function createTwoslashWithInlineCache(twoslashOptions?: VitePressPluginTwoslashOptions, { sourceMapper, sourceMapCodec, }?: TwoslashInlineCacheOptions): (config: UserConfig) => UserConfig;
+
+export { createTwoslashWithInlineCache };
+export type { TwoslashInlineCacheOptions };

package/dist/cache-inline/index.mjs

@@ -0,0 +1,341 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { transformerTwoslash } from '../index.mjs';
+import { createHash } from 'node:crypto';
+import LZString from 'lz-string';
+import { hash } from 'ohash';
+import MagicString from 'magic-string';
+import process from 'node:process';
+import MarkdownIt from 'markdown-it';
+import '@shikijs/twoslash/core';
+import 'twoslash';
+import 'twoslash-vue';
+import '@shikijs/twoslash';
+import 'mdast-util-from-markdown';
+import 'mdast-util-gfm';
+import 'mdast-util-to-hast';
+
+class FilePatcher {
+  files = /* @__PURE__ */ new Map();
+  static key(from, to) {
+    return `${from}${to ? `:${to}` : ""}`;
+  }
+  load(path) {
+    let file = this.files.get(path);
+    if (file === void 0) {
+      if (existsSync(path)) {
+        const content = readFileSync(path, { encoding: "utf-8" });
+        file = { content, patches: /* @__PURE__ */ new Map() };
+      } else {
+        file = null;
+      }
+      this.files.set(path, file);
+    }
+    return file;
+  }
+  patch(path) {
+    const file = this.files.get(path);
+    if (file) {
+      if (file.patches.size) {
+        const s = new MagicString(file.content);
+        for (const [key, value] of file.patches) {
+          const [from, to] = key.split(":").map((s2) => s2 !== "" ? Number(s2) : void 0);
+          if (from === void 0)
+            continue;
+          if (to !== void 0) {
+            s.update(from, to, value);
+          } else {
+            s.appendRight(from, value);
+          }
+        }
+        const content = s.toString();
+        writeFileSync(path, content, { encoding: "utf-8" });
+      }
+      this.files.delete(path);
+    }
+  }
+}
+
+const CODE_INLINE_CACHE_KEY = "@twoslash-cache";
+const CODE_INLINE_CACHE_REGEX = new RegExp(`// ${CODE_INLINE_CACHE_KEY}: (.*)(?:
+|$)`, "g");
+function createInlineTypesCache({ remove, ignoreCache } = {}) {
+  const patcher = new FilePatcher();
+  const optionsHashCache = /* @__PURE__ */ new WeakMap();
+  function getOptionsHash(options = {}) {
+    let hash$1 = optionsHashCache.get(options);
+    if (!hash$1) {
+      hash$1 = hash(options);
+      optionsHashCache.set(options, hash$1);
+    }
+    return hash$1;
+  }
+  function cacheHash(code, lang, options) {
+    return sha256Hash(`${getOptionsHash(options)}:${lang ?? ""}:${code}`);
+  }
+  function stringifyCachePayload(data, code, lang, options) {
+    const hash = cacheHash(code, lang, options);
+    const payload = {
+      v: 1,
+      hash,
+      data: LZString.compressToBase64(JSON.stringify(data))
+    };
+    return JSON.stringify(payload);
+  }
+  function resolveCachePayload(cache) {
+    if (!cache)
+      return null;
+    try {
+      const payload = JSON.parse(cache);
+      if (payload.v === 1) {
+        return {
+          payload,
+          twoslash: () => {
+            try {
+              return JSON.parse(LZString.decompressFromBase64(payload.data));
+            } catch {
+              return null;
+            }
+          }
+        };
+      }
+    } catch {
+    }
+    return null;
+  }
+  function resolveSourcePatcher(source, search) {
+    const file = patcher.load(source.path);
+    if (file === null)
+      return void 0;
+    const range = { from: source.from };
+    let linebreak = true;
+    if (search) {
+      const cachePos = file.content.indexOf(search, source.from);
+      if (cachePos !== -1 && cachePos < source.to) {
+        range.from = cachePos;
+        range.to = cachePos + search.length;
+        linebreak = search.endsWith("\n");
+      }
+    }
+    const patchKey = FilePatcher.key(range.from, range.to);
+    return (newCache) => {
+      if (newCache === "") {
+        if (range.to !== void 0)
+          file.patches.set(patchKey, "");
+        return;
+      }
+      file.patches.set(patchKey, newCache + (linebreak ? "\n" : ""));
+    };
+  }
+  const typesCache = {
+    preprocess(code, lang, options, meta) {
+      if (!meta)
+        return;
+      let rawCache = "";
+      let cacheString = "";
+      code = code.replaceAll(CODE_INLINE_CACHE_REGEX, (full, p1) => {
+        if (!rawCache.length) {
+          cacheString = p1;
+          rawCache = full;
+        }
+        return "";
+      });
+      const shouldLoadCache = !ignoreCache && !remove;
+      if (shouldLoadCache) {
+        const cache = resolveCachePayload(cacheString);
+        if (cache?.payload.hash === cacheHash(code, lang, options)) {
+          const twoslash = cache.twoslash();
+          if (twoslash)
+            meta.__cache = twoslash;
+        }
+      }
+      if (meta.sourceMap)
+        meta.__patch = resolveSourcePatcher(meta.sourceMap, rawCache);
+      return code;
+    },
+    read(code, lang, options, meta) {
+      return meta?.__cache ?? null;
+    },
+    write(code, data, lang, options, meta) {
+      if (remove) {
+        meta?.__patch?.("");
+        return;
+      }
+      const twoslashShiki = simplifyTwoslashReturn(data);
+      const cacheStr = `// ${CODE_INLINE_CACHE_KEY}: ${stringifyCachePayload(twoslashShiki, code, lang, options)}`;
+      meta?.__patch?.(cacheStr);
+    }
+  };
+  return { typesCache, patcher };
+}
+function sha256Hash(str) {
+  return createHash("SHA256").update(str).digest("hex");
+}
+function simplifyTwoslashReturn(ret) {
+  return {
+    nodes: ret.nodes,
+    code: ret.code,
+    meta: ret.meta ? { extension: ret.meta.extension } : void 0
+  };
+}
+
+function isEnabledEnv(key) {
+  const val = process.env?.[key]?.toLowerCase();
+  if (val) {
+    return {
+      true: true,
+      false: false,
+      1: true,
+      0: false,
+      yes: true,
+      no: false,
+      y: true,
+      n: false
+    }[val] || null;
+  }
+  return null;
+}
+
+function createMarkdownFenceSourceCodec(mapper) {
+  const FENCE_SOURCE_WRAP = `<fsm-${Math.random().toString(36).slice(2)}>`;
+  const FENCE_SOURCE_REGEX = new RegExp(`// ${FENCE_SOURCE_WRAP}(.+?)${FENCE_SOURCE_WRAP}\\n`);
+  function stringifyFenceSourceMap(sourceMap) {
+    const data = JSON.stringify(sourceMap);
+    return `// ${FENCE_SOURCE_WRAP}${data}${FENCE_SOURCE_WRAP}
+`;
+  }
+  function injectToMarkdown(code, path) {
+    const injects = mapper(code, path);
+    let newCode = code;
+    const injectAts = Array.from(injects.keys()).sort((a, b) => b - a);
+    for (const at of injectAts) {
+      const sourceMap = injects.get(at);
+      const data = stringifyFenceSourceMap(sourceMap);
+      newCode = newCode.slice(0, at) + data + newCode.slice(at);
+    }
+    return newCode;
+  }
+  function extractFromFence(code) {
+    let sourceMap = null;
+    try {
+      code = code.replace(FENCE_SOURCE_REGEX, (_, p1) => {
+        sourceMap = JSON.parse(p1);
+        return "";
+      });
+    } catch {
+    }
+    return { code, sourceMap };
+  }
+  return {
+    injectToMarkdown,
+    extractFromFence
+  };
+}
+
+const markdownItMapper = function(code, path) {
+  const md = new MarkdownIt();
+  const result = md.parse(code, {});
+  const pos = getLineStartPositions(code);
+  const injects = /* @__PURE__ */ new Map();
+  for (const token of result) {
+    if (token.type === "fence") {
+      if (!token.map)
+        continue;
+      if (token.map[0] + 1 >= pos.length)
+        continue;
+      const codeStart = pos[token.map[0] + 1].from;
+      const codeEnd = pos[token.map[1] - 1].from;
+      injects.set(codeStart, { path, from: codeStart, to: codeEnd });
+    }
+  }
+  return injects;
+};
+function getLineStartPositions(text) {
+  const positions = [];
+  let pos = 0;
+  while (true) {
+    const [idx, len] = findNextNewLine(text, pos);
+    if (idx === -1) {
+      positions.push({ from: pos, to: text.length });
+      break;
+    }
+    positions.push({ from: pos, to: idx });
+    pos = idx + len;
+  }
+  return positions;
+}
+function findNextNewLine(str, position) {
+  const nIdx = str.indexOf("\n", position);
+  const rIdx = str.indexOf("\r", position);
+  if (nIdx === -1 && rIdx === -1)
+    return [-1, 0];
+  let idx;
+  if (nIdx === -1)
+    idx = rIdx;
+  else if (rIdx === -1)
+    idx = nIdx;
+  else idx = nIdx < rIdx ? nIdx : rIdx;
+  if (str.charCodeAt(idx) === 13 && str.charCodeAt(idx + 1) === 10) {
+    return [idx, 2];
+  }
+  return [idx, 1];
+}
+
+function createTwoslashWithInlineCache(twoslashOptions = {}, {
+  sourceMapper = markdownItMapper,
+  sourceMapCodec = createMarkdownFenceSourceCodec(sourceMapper)
+} = {}) {
+  return function(config) {
+    if (isEnabledEnv("TWOSLASH_INLINE_CACHE") === false)
+      return config;
+    const { typesCache, patcher } = createInlineTypesCache({
+      remove: isEnabledEnv("TWOSLASH_INLINE_CACHE_REMOVE") === true,
+      ignoreCache: isEnabledEnv("TWOSLASH_INLINE_CACHE_IGNORE") === true
+    });
+    const transformer = transformerTwoslash({ ...twoslashOptions, typesCache });
+    const PatchPlugin = {
+      name: "vitepress-twoslash:patch",
+      enforce: "post",
+      transform(code, id) {
+        if (id.endsWith(".md")) {
+          patcher.patch(id);
+        }
+      }
+    };
+    config = withFenceSourceMap(config, sourceMapCodec);
+    const codeTransformers = (config.markdown ??= {}).codeTransformers ??= [];
+    codeTransformers.push(transformer);
+    const plugins = (config.vite ??= {}).plugins ??= [];
+    plugins.push(PatchPlugin);
+    return config;
+  };
+}
+function withFenceSourceMap(config, codec) {
+  const InjectPlugin = {
+    name: "vitepress-twoslash:inject-fence-source-map",
+    enforce: "pre",
+    load(id) {
+      if (id.endsWith(".md")) {
+        const code = readFileSync(id, "utf-8");
+        return {
+          code: codec.injectToMarkdown(code, id)
+        };
+      }
+    }
+  };
+  const transformer = {
+    name: "vitepress-twoslash:extract-fence-source-map",
+    enforce: "pre",
+    preprocess(code) {
+      const { code: transformedCode, sourceMap } = codec.extractFromFence(code);
+      this.meta.sourceMap = sourceMap;
+      return transformedCode;
+    }
+  };
+  const codeTransformers = (config.markdown ??= {}).codeTransformers ??= [];
+  codeTransformers.unshift(transformer);
+  const plugins = (config.vite ??= {}).plugins ??= [];
+  plugins.push(InjectPlugin);
+  return config;
+}
+
+export { createTwoslashWithInlineCache };

package/dist/client.mjs

@@ -13,6 +13,7 @@ const TwoslashFloatingVue = {
     app.use(FloatingVue, {
       ...options,
       themes: {
+        ...options.themes,
         "twoslash": {
           $extend: "dropdown",
           triggers: isMobile ? ["touch"] : ["hover", "touch"],
@@ -25,13 +26,15 @@ const TwoslashFloatingVue = {
           instantMove: true,
           flip: false,
           arrowPadding: 8,
-          autoBoundaryMaxSize: true
+          autoBoundaryMaxSize: true,
+          ...options.themes?.twoslash ?? {}
         },
         "twoslash-query": {
           $extend: "twoslash",
           triggers: ["click"],
           popperTriggers: ["click"],
-          autoHide: false
+          autoHide: false,
+          ...options.themes?.["twoslash-query"] ?? {}
         },
         "twoslash-completion": {
           $extend: "twoslash-query",
@@ -39,8 +42,10 @@ const TwoslashFloatingVue = {
           popperTriggers: ["click"],
           autoHide: false,
           distance: 0,
-          arrowOverflow: true
+          arrowOverflow: true,
+          ...options.themes?.["twoslash-completion"] ?? {}
         },
+        /** @deprecated */
         ...options.theme
       }
     });

package/dist/index.d.mts

@@ -1,9 +1,8 @@
 import { ShikiTransformer } from 'shiki';
-import { V as VitePressPluginTwoslashOptions } from './shared/vitepress-twoslash.D_PyQzvF.mjs';
-export { T as TwoslashFloatingVueOptions, a as TwoslashFloatingVueRendererOptions, b as TwoslashTypesCache, r as rendererFloatingVue } from './shared/vitepress-twoslash.D_PyQzvF.mjs';
+import { V as VitePressPluginTwoslashOptions } from './shared/vitepress-twoslash.CBxCru0j.mjs';
+export { T as TwoslashFloatingVueOptions, a as TwoslashFloatingVueRendererOptions, r as rendererFloatingVue } from './shared/vitepress-twoslash.CBxCru0j.mjs';
 export { defaultHoverInfoProcessor } from '@shikijs/twoslash';
 import '@shikijs/twoslash/core';
-import 'twoslash';
 import 'twoslash-vue';
 
 /**

package/dist/index.mjs

@@ -170,8 +170,7 @@ function compose(parts) {
 
 function transformerTwoslash(options = {}) {
   const {
-    explicitTrigger = true,
-    typesCache
+    explicitTrigger = true
   } = options;
   const onError = (error, code) => {
     const isCI = typeof process !== "undefined" && process?.env?.CI;
@@ -191,20 +190,9 @@ ${code.split(/\n/g).slice(0, 15).join("\n").trim()}
       console.error(error);
     removeTwoslashNotations(code);
   };
-  const defaultTwoslasher = createTwoslasher(options.twoslashOptions);
-  let twoslasher = defaultTwoslasher;
-  if (typesCache) {
-    twoslasher = ((code, extension, options2) => {
-      const cached = typesCache.read(code);
-      if (cached)
-        return cached;
-      const twoslashResult = defaultTwoslasher(code, extension, options2);
-      typesCache.write(code, twoslashResult);
-      return twoslashResult;
-    });
-    twoslasher.getCacheMap = defaultTwoslasher.getCacheMap;
-  }
-  const twoslash = createTransformerFactory(twoslasher)({
+  const twoslash = createTransformerFactory(
+    createTwoslasher(options.twoslashOptions)
+  )({
     langs: ["ts", "tsx", "js", "jsx", "json", "vue"],
     renderer: rendererFloatingVue(options),
     onTwoslashError: onError,
@@ -213,7 +201,6 @@ ${code.split(/\n/g).slice(0, 15).join("\n").trim()}
     explicitTrigger
   });
   const trigger = explicitTrigger instanceof RegExp ? explicitTrigger : /\btwoslash\b/;
-  typesCache?.init?.();
   return {
     ...twoslash,
     name: "@shikijs/vitepress-twoslash",

package/dist/shared/{vitepress-twoslash.D_PyQzvF.d.mts → vitepress-twoslash.CBxCru0j.d.mts}

@@ -1,5 +1,4 @@
 import { TransformerTwoslashOptions } from '@shikijs/twoslash/core';
-import { TwoslashReturn } from 'twoslash';
 import { VueSpecificOptions } from 'twoslash-vue';
 import { RendererRichOptions, TwoslashRenderer } from '@shikijs/twoslash';
 
@@ -28,42 +27,7 @@ interface VitePressPluginTwoslashOptions extends TransformerTwoslashVueOptions,
      * @default true
      */
     explicitTrigger?: TransformerTwoslashOptions['explicitTrigger'];
-    /**
-     * The options for caching resolved types
-     *
-     * @example
-     * ```ts
-     * import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
-     * import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs'
-     *
-     * transformerTwoslash({
-     *   typesCache: createFileSystemTypesCache({
-     *     dir: './my-cache-dir'
-     *   })
-     * })
-     * ```
-     */
-    typesCache?: TwoslashTypesCache;
-}
-interface TwoslashTypesCache {
-    /**
-     * Read cached result
-     *
-     * @param code Source code
-     */
-    read: (code: string) => TwoslashReturn | null;
-    /**
-     * Save result to cache
-     *
-     * @param code Source code
-     * @param data Twoslash data
-     */
-    write: (code: string, data: TwoslashReturn) => void;
-    /**
-     * On initialization
-     */
-    init?: () => void;
 }
 
 export { rendererFloatingVue as r };
-export type { TwoslashFloatingVueOptions as T, VitePressPluginTwoslashOptions as V, TwoslashFloatingVueRendererOptions as a, TwoslashTypesCache as b };
+export type { TwoslashFloatingVueOptions as T, VitePressPluginTwoslashOptions as V, TwoslashFloatingVueRendererOptions as a };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shikijs/vitepress-twoslash",
   "type": "module",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "Enable Twoslash support in VitePress",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -22,6 +22,7 @@
     ".": "./dist/index.mjs",
     "./client": "./dist/client.mjs",
     "./cache-fs": "./dist/cache-fs.mjs",
+    "./cache-inline": "./dist/cache-inline/index.mjs",
     "./style.css": "./style.css",
     "./style-core.css": "./style-core.css"
   },
@@ -35,13 +36,17 @@
   "dependencies": {
     "@shikijs/twoslash": "",
     "floating-vue": "^5.2.2",
+    "lz-string": "^1.5.0",
+    "magic-string": "^0.30.17",
+    "markdown-it": "^14.1.0",
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-gfm": "^3.1.0",
     "mdast-util-to-hast": "^13.2.0",
+    "ohash": "^2.0.11",
     "twoslash": "^0.3.4",
     "twoslash-vue": "^0.3.4",
-    "vue": "^3.5.18",
-    "shiki": "3.11.0"
+    "vue": "^3.5.20",
+    "shiki": "3.12.0"
   },
   "scripts": {
     "build": "unbuild",