fix

Author: teemingc

apps/svelte.dev/package.json

@@ -47,15 +47,20 @@
 		"yootils": "^0.3.1"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20241127.0",
+		"@cloudflare/workers-types": "^4.20250620.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@supabase/supabase-js": "^2.43.4",
+		"@sveltejs/adapter-cloudflare": "^7.0.4",
+		"@sveltejs/adapter-netlify": "^5.0.2",
+		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/adapter-vercel": "^5.7.0",
 		"@sveltejs/enhanced-img": "^0.4.3",
 		"@sveltejs/kit": "^2.20.0",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.3",
 		"@types/cookie": "^0.6.0",
+		"@types/express": "^5.0.3",
 		"@types/node": "^20.14.2",
 		"browserslist": "^4.24.2",
 		"chokidar": "^4.0.1",

apps/svelte.dev/src/lib/server/renderer.ts

@@ -7,11 +7,7 @@ export const render_content = (
 ) => {
 	return render_content_markdown(filename, body, options, (filename, source) => {
 		// TODO these are copied from Svelte and SvelteKit - adjust for new filenames
-		const injected = [];
-
-		if (/(svelte)/.test(source) || filename.includes('typescript')) {
-			injected.push(`// @filename: ambient.d.ts`, `/// <reference types="svelte" />`);
-		}
+		const injected: string[] = [];
 
 		if (filename.includes('svelte-compiler')) {
 			injected.push('// @esModuleInterop');
@@ -22,7 +18,7 @@ export const render_content = (
 		}
 
 		// Actions JSDoc examples are invalid. Too many errors, edge cases
-		// d.ts files are not properly supported right now, fix this later
+		// TODO: d.ts files are not properly supported right now, fix this later
 		if (filename.includes('svelte-action') || source.includes(' declare const ')) {
 			injected.push('// @noErrors');
 		}
@@ -31,10 +27,11 @@ export const render_content = (
 			injected.push('// @errors: 2304');
 		}
 
+		// twoslash doesn't recognise these as SvelteKit imports, so we need to
+		// explicitly reference the types in these instances
 		if (
 			source.includes('$app/') ||
-			source.includes('$service-worker') ||
-			source.includes('@sveltejs/kit/')
+			source.includes('$service-worker')
 		) {
 			injected.push(`// @filename: ambient-kit.d.ts`, `/// <reference types="@sveltejs/kit" />`);
 		}
@@ -43,10 +40,11 @@ export const render_content = (
 			// TODO we're hardcoding static env vars that are used in code examples
 			// in the types, which isn't... totally ideal, but will do for now
 			injected.push(
-				`declare module '$env/dynamic/private' { export const env: Record<string, string> }`,
-				`declare module '$env/dynamic/public' { export const env: Record<string, string> }`,
-				`declare module '$env/static/private' { export const API_KEY: string }`,
-				`declare module '$env/static/public' { export const PUBLIC_BASE_URL: string }`
+				`declare module '$env/dynamic/private' { export const env: Record<string, string>; }`,
+				`declare module '$env/dynamic/public' { export const env: Record<string, string>; }`,
+				// TODO: detect when a snippet imports from $env/static then generate the types on the fly
+				`declare module '$env/static/private' { export const API_KEY: string; export const BYPASS_TOKEN: string; export const VERCEL_COMMIT_REF: string; }`,
+				`declare module '$env/static/public' { export const PUBLIC_BASE_URL: string; }`
 			);
 		}
 
@@ -71,10 +69,6 @@ export const render_content = (
 			injected.push('// @errors: 7006 7031');
 		}
 
-		if (filename.endsWith('10-configuration.md')) {
-			injected.push('// @errors: 2307');
-		}
-
 		// another special case
 		if (source.includes('$lib/types')) {
 			injected.push(`declare module '$lib/types' { export interface User {} }`);

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

@@ -54,6 +54,7 @@ const highlighter = await createHighlighterCore({
 		import('@shikijs/langs/css'),
 		import('@shikijs/langs/bash'),
 		import('@shikijs/langs/yaml'),
+		import('@shikijs/langs/toml'),
 		import('@shikijs/langs/svelte')
 	],
 	engine: createOnigurumaEngine(import('shiki/wasm'))
@@ -234,7 +235,14 @@ export async function render_content_markdown(
 
 				if ((token.lang === 'js' || token.lang === 'ts') && check) {
 					const match = /((?:[\s\S]+)\/\/ ---cut---\n)?([\s\S]+)/.exec(source)!;
-					[, prelude = '// ---cut---\n', source] = match;
+					// we need to ensure that the source content is separated from the
+					// injected content by a '// @filename: ...' otherwise it will be
+					// interpreted as the same file and prevent types from working
+					[
+						,
+						prelude = `${source.includes('// @filename:') ? '' : '// @filename: dummy.' + token.lang}\n// ---cut---\n`,
+						source
+					] = match;
 
 					const banner = twoslashBanner?.(filename, source);
 					if (banner) prelude = '// @filename: injected.d.ts\n' + banner + '\n' + prelude;
@@ -757,7 +765,7 @@ async function syntax_highlight({
 		/** We need to stash code wrapped in `---` highlights, because otherwise TS will error on e.g. bad syntax, duplicate declarations */
 		const redactions: string[] = [];
 
-		const redacted = source.replace(/( {13}(?:[^ ][^]+?) {13})/g, (_, content) => {
+		let redacted = source.replace(/( {13}(?:[^ ][^]+?) {13})/g, (_, content) => {
 			redactions.push(content);
 			return ' '.repeat(content.length);
 		});
@@ -773,7 +781,9 @@ async function syntax_highlight({
 									compilerOptions: {
 										allowJs: true,
 										checkJs: true,
-										types: ['svelte', '@sveltejs/kit']
+										// we always include the Svelte types because it's easier
+										// than adding a reference when we detect a rune being used
+										types: ['node', 'svelte']
 									}
 								},
 								// by default, twoslash does not run on .js files, change that through this option
@@ -860,7 +870,7 @@ async function syntax_highlight({
 		html = replace_blank_lines(html);
 	} else {
 		const highlighted = highlighter.codeToHtml(source, {
-			lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP],
+			lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP] ?? language,
 			theme
 		});
 
@@ -884,6 +894,7 @@ async function syntax_highlight({
 		.replace(/ {11}([^ ][^]+?) {11}/g, (_, content) => {
 			return highlight_spans(content, 'highlight add');
 		})
+		// TODO: make this not highlight the static adapter's github yaml deploy file
 		.replace(/ {9}([^ ][^]+?) {9}/g, (_, content) => {
 			return highlight_spans(content, 'highlight');
 		});