update shiki (#288)

Author: Rich-Harris

apps/svelte.dev/package.json

@@ -82,8 +82,6 @@
 		"prettier-plugin-svelte": "^3.2.4",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"shiki": "^1.6.4",
-		"shiki-twoslash": "^3.1.2",
 		"svelte": "5.0.0-next.260",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^5.1.4",

packages/site-kit/package.json

@@ -26,8 +26,10 @@
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
 		"@fontsource/fira-sans": "^5.1.0",
+		"@shikijs/twoslash": "^1.22.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
+		"shiki": "^1.22.0",
 		"svelte-persisted-store": "^0.9.2"
 	},
 	"devDependencies": {
@@ -38,7 +40,6 @@
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
-		"shiki-twoslash": "^3.1.2",
 		"svelte": "5.0.0-next.260",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.5.4",

packages/site-kit/src/lib/docs/hover.ts

@@ -9,7 +9,7 @@ export function setupDocsHovers() {
 		function over(event: MouseEvent) {
 			const target = event.target as HTMLElement;
 
-			if (target.tagName === 'DATA-LSP') {
+			if (target.classList?.contains('twoslash-hover')) {
 				clearTimeout(timeout);
 
 				if (tooltip) {
@@ -18,7 +18,7 @@ export function setupDocsHovers() {
 				}
 
 				const rect = target?.getBoundingClientRect();
-				const html = target?.getAttribute('lsp');
+				const html = target?.innerHTML;
 
 				const x = (rect.left + rect.right) / 2 + window.scrollX;
 				const y = rect.top + window.scrollY;
@@ -46,7 +46,7 @@ export function setupDocsHovers() {
 
 		function out(event: MouseEvent) {
 			const target = event.target as HTMLElement;
-			if (target.tagName === 'DATA-LSP') {
+			if (target.classList?.contains('twoslash-hover')) {
 				timeout = setTimeout(() => {
 					unmount(tooltip);
 					tooltip = null;

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

@@ -4,6 +4,8 @@ import fs from 'node:fs';
 import path from 'node:path';
 import ts from 'typescript';
 import * as prettier from 'prettier';
+import { codeToHtml, createCssVariablesTheme } from 'shiki';
+import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, escape, normalizeSlugify, smart_quotes, transform } from './utils';
 import type { Declaration, TypeElement, Modules } from './index';
 
@@ -31,7 +33,12 @@ interface RenderContentOptions {
 const METADATA_REGEX =
 	/(?:<!---\s*|\/\/\/\s*|###\s*)(?<key>file|link|copy):\s*(?<value>.*?)(?:\s*--->|$)\n/gm;
 
-let twoslash_module: typeof import('shiki-twoslash');
+const theme = createCssVariablesTheme({
+	name: 'css-variables',
+	variablePrefix: '--shiki-',
+	variableDefaults: {},
+	fontStyle: true
+});
 
 /**
  * A super markdown renderer function. Renders svelte and kit docs specific specific markdown code to html.
@@ -126,10 +133,6 @@ export async function render_content_markdown(
 		resolveTypeLinks
 	}: RenderContentOptions = {}
 ) {
-	twoslash_module ??= await import('shiki-twoslash');
-
-	const highlighter = await twoslash_module.createShikiHighlighter({ theme: 'css-variables' });
-
 	const { type_links, type_regex } = create_type_links(modules, resolveTypeLinks);
 	const snippets = await create_snippet_cache(cacheCodeSnippets);
 
@@ -177,19 +180,17 @@ export async function render_content_markdown(
 
 				html += '</div>';
 
-				html += syntax_highlight({
+				html += await syntax_highlight({
 					filename,
-					highlighter,
 					language: token.lang,
 					source,
 					twoslashBanner,
 					options
 				});
 
 				if (converted) {
-					html += syntax_highlight({
+					html += await syntax_highlight({
 						filename,
-						highlighter,
 						language: token.lang === 'js' ? 'ts' : token.lang,
 						source: converted,
 						twoslashBanner,
@@ -932,32 +933,27 @@ function replace_blank_lines(html: string) {
 	return html.replaceAll(/<div class='line'>(&nbsp;)?<\/div>/g, '<div class="line">\n</div>');
 }
 
-function syntax_highlight({
+async function syntax_highlight({
 	source,
 	filename,
 	language,
-	highlighter,
 	twoslashBanner,
 	options
 }: {
 	source: string;
 	filename: string;
 	language: string;
-	highlighter: Awaited<ReturnType<typeof import('shiki-twoslash').createShikiHighlighter>>;
 	twoslashBanner?: TwoslashBanner;
 	options: SnippetOptions;
 }) {
 	let html = '';
 
 	if (/^(dts|yaml|yml)/.test(language)) {
 		html = replace_blank_lines(
-			twoslash_module.renderCodeToHTML(
-				source,
-				language === 'dts' ? 'ts' : language,
-				{ twoslash: false },
-				{ themeName: 'css-variables' },
-				highlighter
-			)
+			await codeToHtml(source, {
+				lang: language === 'dts' ? 'ts' : language,
+				theme
+			})
 		);
 	} else if (/^(js|ts)/.test(language)) {
 		try {
@@ -974,41 +970,18 @@ function syntax_highlight({
 				}
 			}
 
-			const twoslash = twoslash_module.runTwoSlash(source, language, {
-				defaultCompilerOptions: {
-					allowJs: true,
-					checkJs: true,
-					target: ts.ScriptTarget.ES2022,
-					types: ['svelte', '@sveltejs/kit']
-				}
+			html = await codeToHtml(source, {
+				lang: 'ts',
+				theme,
+				transformers: [transformerTwoslash({})]
 			});
-
-			html = twoslash_module.renderCodeToHTML(
-				twoslash.code,
-				'ts',
-				{ twoslash: true },
-				// @ts-ignore Why shiki-twoslash requires a theme name?
-				{},
-				highlighter,
-				twoslash
-			);
 		} catch (e) {
 			console.error(`Error compiling snippet in ${filename}`);
 			// @ts-ignore
 			console.error(e.code);
 			throw e;
 		}
 
-		// we need to be able to inject the LSP attributes as HTML, not text, so we
-		// turn &lt; into &amp;lt;
-		html = html.replace(
-			/<data-lsp lsp='([^']*)'([^>]*)>(\w+)<\/data-lsp>/g,
-			(_, lsp, attrs, name) => {
-				if (!lsp) return name;
-				return `<data-lsp lsp='${lsp.replace(/&/g, '&amp;')}'${attrs}>${name}</data-lsp>`;
-			}
-		);
-
 		html = replace_blank_lines(html);
 	} else if (language === 'diff') {
 		const lines = source.split('\n').map((content) => {
@@ -1031,8 +1004,9 @@ function syntax_highlight({
 			})
 			.join('')}</code></pre>`;
 	} else {
-		const highlighted = highlighter.codeToHtml(source, {
-			lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP]
+		const highlighted = await codeToHtml(source, {
+			lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP],
+			theme
 		});
 
 		html = replace_blank_lines(highlighted);

packages/site-kit/src/lib/styles/code.css

@@ -58,15 +58,12 @@ html.dark {
 	display: none;
 }
 
-pre.twoslash :where(.error, .error-behind) {
-	display: none;
-}
-
-pre.twoslash data-lsp {
-	transition: border-color 0.3s;
-	border-bottom: 1px dotted transparent;
-}
+pre {
+	.twoslash-hover {
+		position: relative;
 
-pre.twoslash:hover data-lsp {
-	border-color: var(--sk-back-5);
+		.twoslash-popup-container {
+			display: none;
+		}
+	}
 }