remove shiki@1 (#1269)

* remove shiki@1

* WIP

* i think it works?

Author: Rich-Harris

apps/svelte.dev/package.json

@@ -21,7 +21,6 @@
 		"@lezer/javascript": "^1.4.7",
 		"@lezer/lr": "^1.3.10",
 		"@rich_harris/svelte-split-pane": "^2.0.0",
-		"@shikijs/twoslash": "^1.22.0",
 		"@sveltejs/amp": "^1.1.4",
 		"@sveltejs/repl": "workspace:*",
 		"@testing-library/dom": "^10.4.0",
@@ -41,7 +40,6 @@
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
 		"port-authority": "^2.0.1",
-		"shiki": "^1.22.0",
 		"topojson-client": "^3.1.0",
 		"vitest": "^2.1.9",
 		"ws": "^8.18.0",

apps/svelte.dev/vite.config.ts

@@ -59,7 +59,20 @@ const config: UserConfig = {
 		}
 	},
 	build: {
-		cssMinify: 'lightningcss'
+		cssMinify: 'lightningcss',
+		rollupOptions: {
+			output: {
+				banner: (chunk) => {
+					// this monstrosity is required for twoslash (which uses `require`) to work during prerendering.
+					// it is brittle and may not work in perpetuity but i'm not sure what a better solution would be
+					if (chunk.type === 'chunk' && chunk.name === 'renderer') {
+						return `import { createRequire } from 'node:module'; const require = createRequire(import.meta.url);`;
+					}
+
+					return '';
+				}
+			}
+		}
 	},
 	server: {
 		fs: { allow: ['../../packages', '../../../KIT/kit/packages/kit'] },
@@ -74,8 +87,7 @@ const config: UserConfig = {
 		exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser']
 	},
 	ssr: {
-		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'],
-		external: ['shiki', '@shikijs/twoslash']
+		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl']
 	},
 	worker: {
 		format: 'es'

packages/site-kit/package.json

@@ -38,6 +38,7 @@
 		"@fontsource/fira-sans": "^5.1.0",
 		"@lezer/common": "^1.0.4",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
+		"@shikijs/langs": "^3.2.1",
 		"@shikijs/twoslash": "^3.2.1",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",

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

@@ -5,7 +5,9 @@ import process from 'node:process';
 import path from 'node:path';
 import ts from 'typescript';
 import * as marked from 'marked';
-import { codeToHtml, createCssVariablesTheme } from 'shiki';
+import { createHighlighterCore } from 'shiki/core';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+import { createCssVariablesTheme } from 'shiki';
 import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils';
 
@@ -43,6 +45,20 @@ if (!fs.existsSync(original_file)) {
 hash_graph(hash, original_file);
 const digest = hash.digest().toString('base64').replace(/\//g, '-');
 
+const highlighter = await createHighlighterCore({
+	themes: [],
+	langs: [
+		import('@shikijs/langs/javascript'),
+		import('@shikijs/langs/typescript'),
+		import('@shikijs/langs/html'),
+		import('@shikijs/langs/css'),
+		import('@shikijs/langs/bash'),
+		import('@shikijs/langs/yaml'),
+		import('@shikijs/langs/svelte')
+	],
+	engine: createOnigurumaEngine(import('shiki/wasm'))
+});
+
 /**
  * Utility function to work with code snippet caching.
  *
@@ -722,7 +738,7 @@ async function syntax_highlight({
 
 	if (/^(dts|yaml|yml)/.test(language)) {
 		html = replace_blank_lines(
-			await codeToHtml(source, {
+			highlighter.codeToHtml(source, {
 				lang: language === 'dts' ? 'ts' : language,
 				theme
 			})
@@ -737,7 +753,7 @@ async function syntax_highlight({
 		});
 
 		try {
-			html = await codeToHtml(prelude + redacted, {
+			html = highlighter.codeToHtml(prelude + redacted, {
 				lang: language,
 				theme,
 				transformers: check
@@ -833,7 +849,7 @@ async function syntax_highlight({
 
 		html = replace_blank_lines(html);
 	} else {
-		const highlighted = await codeToHtml(source, {
+		const highlighted = highlighter.codeToHtml(source, {
 			lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP],
 			theme
 		});