Twoslash Type Hover

Copy/**
 * This transformer **must** be used with the `rehype-code` plugin of Fumadocs.
 */
export function transformerTwoslash(_options: TransformerTwoslashOptions = {}): ShikiTransformer {
  const ignoreClass = 'nd-copy-ignore';
  const { twoslashOptions = {}, rendererRich: rendererOptions, ...rest } = _options;
 
  // lazy load Twoslash instance so it works on serverless platforms
  function lazyInstance(): TwoslashInstance {
    function get() {
      return (cachedInstance ??= createTwoslasher({
        ...twoslashOptions,
        compilerOptions: {
          moduleResolution: 100 satisfies ModuleResolutionKind.Bundler,
          baseUrl: undefined,
          ...twoslashOptions.compilerOptions,
        },
      }));
    }
 
    const wrapper: TwoslashInstance = (...args) => get()(...args);
 
    wrapper.getCacheMap = () => get().getCacheMap();
    return wrapper;
  }

Copy  const renderer = rendererRich({
    classExtra: ignoreClass,
    queryRendering: 'line',
    renderMarkdown,
    renderMarkdownInline,
    ...rendererOptions,
    hast: {
      hoverToken: {
        tagName: 'Popup',
      },
      hoverPopup: {
        tagName: 'PopupContent',
        properties: {
          class: ignoreClass,
        },
      },
      hoverCompose: ({ popup, token }) => [
        popup,
        {
          type: 'element',
          tagName: 'PopupTrigger',
          properties: {},
          children: [token],
        },
      ],
      popupDocs: {
        class: 'prose twoslash-popup-docs',
      },
      popupTypes: {
        tagName: 'div',
        class: 'twoslash shiki fd-codeblock prose-no-margin',
        children: (v) => {
          if (v.length === 1 && v[0].type === 'element' && v[0].tagName === 'pre') return v;
 
          return [
            {
              type: 'element',
              tagName: 'code',
              properties: {
                class: 'twoslash-popup-code',
              },
              children: v,
            },
          ];
        },
      },
      popupDocsTags: {
        class: 'prose twoslash-popup-docs twoslash-popup-docs-tags',
      },
      nodesHighlight: {
        class: 'highlighted-word twoslash-highlighted',
      },
      ...rendererOptions?.hast,
    },
  });
 
  const fn = renderer.lineQuery!;
  renderer.lineQuery = function (this: ShikiTransformerContext, ...args) {
    const result = fn.call(this, ...args);
    // this may break if Shiki updates, need more attention
    // @ts-expect-error -- extract offset
    const child = result[0].children[0];
    // @ts-expect-error -- attend offset as span
    result[0].children[0] = {
      type: 'element',
      tagName: 'span',
      children: [child],
    };
    return result;
  };
  return createTransformerFactory(
    lazyInstance(),
    renderer,
  )({
    explicitTrigger: true,
    ...rest,
  });
}

Copyfunction renderMarkdown(this: ShikiTransformerContextCommon, md: string): ElementContent[] {
  const mdast = fromMarkdown(
    md.replace(/{@link (?<link>[^}]*)}/g, '$1'), // replace jsdoc links
    { mdastExtensions: [gfmFromMarkdown()] },
  );
 
  const onCode = (lang: string, node: Code) => {
    return this.codeToHast(node.value, {
      ...this.options,
      transformers: [],
      meta: node.meta
        ? {
            __raw: node.meta,
          }
        : {},
      lang,
    }).children[0] as Element;
  };
 
  return (
    toHast(mdast, {
      handlers: {
        code: (state, node: Code) => {
          const lang = node.lang;
          if (!lang) return defaultHandlers.code(state, node);
 
          try {
            return onCode(lang, node);
          } catch (e) {
            const def = defaultHandlers.code(state, node);
 
            if (e instanceof ShikiError) {
              this.meta._fd_postprocess ??= [];
              this.meta._fd_postprocess.push(async ({ highlighter }) => {
                await highlighter.loadLanguage(lang as never);
                Object.assign(def, onCode(lang, node));
              });
 
              return def;
            }
 
            if (e instanceof Error) {
              console.error(
                `[fumadocs-twoslash] encountered an error when highlighting codeblock in a Twoslash popup: ${e.message}`,
              );
            }
 
            return def;
          }
        },
      },
    }) as Element
  ).children;
}

Copyexport function markdownRenderer(options?: ShikiOptions): MarkdownRenderer {
  const processor = remark()
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeCode, {
      langs: ['ts', 'tsx'],
      // disable default transformers & meta parser
      transformers: [],
      parseMetaString: undefined,
      ...options,
    });
  return {
    async renderTypeToHast(type) {
      const nodes = await highlightHast(type, {
        lang: 'ts',
        structure: 'inline',
        defaultColor: false,
        ...options,
      });
 
      return {
        type: 'element',
        tagName: 'span',
        properties: {
          class: 'shiki',
        },
        children: [
          {
            type: 'element',
            tagName: 'code',
            properties: {},
            children: nodes.children as ElementContent[],
          },
        ],
      };
    },
    renderMarkdownToHast(md) {
      md = md.replace(/{@link (?<link>[^}]*)}/g, '$1'); // replace jsdoc links
 
      return processor.run(processor.parse(md));
    },
  };

Copyconst onCode = (lang: string, node: Code) => {
  return this.codeToHast(node.value, {
    ...this.options,
    transformers: [],
    meta: node.meta
      ? {
          __raw: node.meta,
        }
      : {},
    lang,
  }).children[0] as Element;
};

Copy  try {
    return onCode(lang, node);
  } catch (e) {
    const def = defaultHandlers.code(state, node);
 
    if (e instanceof ShikiError) {
      this.meta._fd_postprocess ??= [];
      this.meta._fd_postprocess.push(async ({ highlighter }) => {
        await highlighter.loadLanguage(lang as never);
        Object.assign(def, onCode(lang, node));
      });
 
      return def;
    }
 
    if (e instanceof Error) {
      console.error(
        `[fumadocs-twoslash] encountered an error when highlighting codeblock in a Twoslash popup: ${e.message}`,
      );
    }
 
    return def;
  }
},

Copyfunction renderMarkdownInline(
  this: ShikiTransformerContextCommon,
  md: string,
  context?: string,
): ElementContent[] {
  const text = context === 'tag:param' ? md.replace(/^(?<link>[\w$-]+)/, '`$1` ') : md;
 
  const children = renderMarkdown.call(this, text);
  if (children.length === 1 && children[0].type === 'element' && children[0].tagName === 'p')
    return children[0].children;
  return children;
}

Copy'use client';
export * from './popup';

Copy/* ===== Basic ===== */
@theme {
  --color-twoslash-error-foreground: #d45656;
  --color-twoslash-error: #d4565620;
  --color-twoslash-tag-foreground: #3772cf;
  --color-twoslash-tag: #3772cf20;
  --color-twoslash-tag-warn-foreground: #c37d0d;
  --color-twoslash-tag-warn: #c37d0d20;
  --color-twoslash-tag-annotate-foreground: #1ba673;
  --color-twoslash-tag-annotate: #1ba67320;
}

Copy/* ===== Error Line ===== */
.twoslash .twoslash-error-line {
  position: relative;
  background-color: var(--twoslash-error-bg);
  border-left: 3px solid var(--color-twoslash-error-foreground);
  color: var(--color-twoslash-error-foreground);
  padding: 6px 12px;
  margin: 0.2em 0;
}
 
.twoslash .twoslash-error {
  text-decoration: wavy underline var(--color-twoslash-error-foreground);
  padding-bottom: 2px;
}
 

Copy.twoslash-completion-list,
.twoslash-popup-container {
  position: relative;
  user-select: none;
  display: flex;
  margin-top: 8px;
  width: 20rem;
  margin-right: -20rem;
  flex-direction: column;
  white-space: normal;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  border: 1px solid var(--color-fd-border);
  border-radius: 6px;
  padding: 8px;
  z-index: 8;
  color: var(--color-fd-popover-foreground);
  background-color: var(--color-fd-popover);
}

Copy.twoslash-popup-arrow {
  position: absolute;
  top: -4px;
  left: 1em;
  transform: rotate(-45deg);
  pointer-events: none;
  width: 6px;
  height: 6px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-color: var(--color-fd-primary);
  background-color: var(--color-fd-popover);
}
 

Copy.fd-twoslash-popover {
  z-index: 50;
  min-width: 240px;
  max-width: min(450px, 96vw);
  max-height: 400px;
  overflow: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-fd-border);
  background-color: var(--color-fd-popover);
  padding: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  color: var(--color-fd-popover-foreground);
  box-shadow: var(--shadow-md);
  transform-origin: var(--radix-popover-content-transform-origin);
}
 
.fd-twoslash-popover[data-state='open'] {
  animation: var(--animate-fd-popover-in);
}
 
.fd-twoslash-popover[data-state='closed'] {
  animation: var(--animate-fd-popover-out);
}
 
.fd-twoslash-popover:focus-visible {
  outline-style: none;