oops

Author: trueadm

packages/site-kit/src/lib/markdown/renderer.ts

@@ -3,6 +3,7 @@ import { createHash, Hash } from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 import ts from 'typescript';
+import * as marked from 'marked';
 import { codeToHtml, createCssVariablesTheme } from 'shiki';
 import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils';
@@ -185,11 +186,11 @@ const snippets = await create_snippet_cache();
 export async function render_content_markdown(
 	filename: string,
 	body: string,
-	options: { check?: boolean },
+	options?: { check?: boolean },
 	twoslashBanner?: TwoslashBanner
 ) {
 	const headings: string[] = [];
-	const { check = true } = options;
+	const { check = true } = options ?? {};
 
 	return await transform(body, {
 		async walkTokens(token) {
@@ -675,6 +676,66 @@ async function syntax_highlight({
 			});
 
 			html = html.replace(/ {27,}/g, () => redactions.shift()!);
+
+			if (check) {
+				// munge the twoslash output so that it renders sensibly. the order of operations
+				// here is important — we need to work backwards, to avoid corrupting the offsets
+				const replacements: Array<{ start: number; end: number; content: string }> = [];
+
+				for (const match of html.matchAll(/<div class="twoslash-popup-docs">([^]+?)<\/div>/g)) {
+					const content = await render_content_markdown('<twoslash>', match[1], { check: false });
+
+					replacements.push({
+						start: match.index,
+						end: match.index + match[0].length,
+						content: '<div class="twoslash-popup-docs">' + content + '</div>'
+					});
+				}
+
+				while (replacements.length > 0) {
+					const { start, end, content } = replacements.pop()!;
+					html = html.slice(0, start) + content + html.slice(end);
+				}
+
+				for (const match of html.matchAll(
+					/<span class="twoslash-popup-docs-tag"><span class="twoslash-popup-docs-tag-name">([^]+?)<\/span><span class="twoslash-popup-docs-tag-value">([^]+?)<\/span><\/span>/g
+				)) {
+					const tag = match[1];
+					let value = match[2];
+
+					let content = `<span class="tag">${tag}</span><span class="value">`;
+
+					if (tag === '@param' || tag === '@throws') {
+						const words = value.split(' ');
+						let param = words.shift()!;
+						value = words.join(' ');
+
+						if (tag === '@throws') {
+							if (param[0] !== '{' || param[param.length - 1] !== '}') {
+								throw new Error('TODO robustify @throws handling');
+							}
+
+							param = param.slice(1, -1);
+						}
+
+						content += `<span class="param">${param}</span> `;
+					}
+
+					content += marked.parseInline(value);
+					content += '</span>';
+
+					replacements.push({
+						start: match.index,
+						end: match.index + match[0].length,
+						content: '<div class="tags">' + content + '</div>'
+					});
+				}
+
+				while (replacements.length > 0) {
+					const { start, end, content } = replacements.pop()!;
+					html = html.slice(0, start) + content + html.slice(end);
+				}
+			}
 		} catch (e) {
 			console.error((e as Error).message);
 			console.warn(prelude + redacted);