Fail on 500s during prerendering (#295)

* make prerendering errors easier to see

* externalise shiki. unfortunately this means installing it to apps/svelte.dev

* fixes

* fix

* fixes

* various fixes

* fail build if page 500s when prerendering

* lint

* ok FINALLY

Author: Rich-Harris

apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md

@@ -22,6 +22,6 @@ In short, Svelte is a way of writing user interface components — like a naviga
 
 Svelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.
 
-SvelteKit helps you build web apps while following modern best practices and providing solutions to common development challenges. It offers everything from basic functionalities — like a [router](glossary#routing) that updates your UI when a link is clicked — to more advanced capabilities. Its extensive list of features includes [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations) to load only the minimal required code; [offline support](service-workers); [preloading](link-options#data-sveltekit-preload-data) pages before user navigation; [configurable rendering](page-options) to handle different parts of your app on the server via [SSR](glossary#ssr), in the browser through [client-side rendering](glossary#csr), or at build-time with [prerendering](glossary#prerendering); [image optimization](images); and much more. Building an app with all the modern best practices is fiendishly complicated, but SvelteKit does all the boring stuff for you so that you can get on with the creative part.
+SvelteKit helps you build web apps while following modern best practices and providing solutions to common development challenges. It offers everything from basic functionalities — like a [router](glossary#Routing) that updates your UI when a link is clicked — to more advanced capabilities. Its extensive list of features includes [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations) to load only the minimal required code; [offline support](service-workers); [preloading](link-options#data-sveltekit-preload-data) pages before user navigation; [configurable rendering](page-options) to handle different parts of your app on the server via [SSR](glossary#SSR), in the browser through [client-side rendering](glossary#CSR), or at build-time with [prerendering](glossary#Prerendering); [image optimization](images); and much more. Building an app with all the modern best practices is fiendishly complicated, but SvelteKit does all the boring stuff for you so that you can get on with the creative part.
 
 It reflects changes to your code in the browser instantly to provide a lightning-fast and feature-rich development experience by leveraging [Vite](https://vitejs.dev/) with a [Svelte plugin](https://github.com/sveltejs/vite-plugin-svelte) to do [Hot Module Replacement (HMR)](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot).

apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md

@@ -94,14 +94,7 @@ Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/increm
 To add ISR to a route, include the `isr` property in your `config` object:
 
 ```js
-/// file: blog/[slug]/+page.server.js
-// @filename: ambient.d.ts
-declare module '$env/static/private' {
-	export const BYPASS_TOKEN: string;
-}
-
-// @filename: index.js
-// ---cut---
+// @errors: 2664
 import { BYPASS_TOKEN } from '$env/static/private';
 
 export const config = {

apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md

@@ -110,6 +110,11 @@ export async function handle({ event, resolve }) {
 To prevent shipping any unused CSS as a result of transforming the page to amp, we can use [`dropcss`](https://www.npmjs.com/package/dropcss):
 
 ```js
+// @filename: ambient.d.ts
+declare module 'dropcss';
+
+// @filename: index.js
+// ---cut---
 /// file: src/hooks.server.js
 // @errors: 2307
 import * as amp from '@sveltejs/amp';

apps/svelte.dev/content/docs/kit/98-reference/[email protected]

@@ -34,6 +34,7 @@ async function first({ event, resolve }) {
 		preload: () => {
 			// this one wins as it's the first defined in the chain
 			console.log('first preload');
+			return true;
 		}
 	});
 	console.log('first post-processing');
@@ -50,10 +51,12 @@ async function second({ event, resolve }) {
 		},
 		preload: () => {
 			console.log('second preload');
+			return true;
 		},
 		filterSerializedResponseHeaders: () => {
 			// this one wins as it's the first defined in the chain
-	 		console.log('second filterSerializedResponseHeaders');
+			console.log('second filterSerializedResponseHeaders');
+			return true;
 		}
 	});
 	console.log('second post-processing');

apps/svelte.dev/content/docs/kit/98-reference/20-$app-paths.md

@@ -51,6 +51,8 @@ Populate a route ID with params to resolve a pathname.
 
 ```js
 // @errors: 7031
+import { resolveRoute } from '$app/paths';
+
 resolveRoute(
 	`/blog/[slug]/[...somethingElse]`,
 	{

apps/svelte.dev/content/docs/svelte/05-misc/02-testing.md

@@ -208,6 +208,7 @@ export default config;
 You can now start writing tests. These are totally unaware of Svelte as a framework, so you mainly interact with the DOM and write assertions.
 
 ```js
+// @errors: 2307 7031
 /// file: tests/hello-world.spec.js
 import { expect, test } from '@playwright/test';
 

apps/svelte.dev/package.json

@@ -34,6 +34,8 @@
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@replit/codemirror-vim": "^6.0.14",
 		"@rich_harris/svelte-split-pane": "^1.1.3",
+		"@shikijs/twoslash": "^1.22.0",
+		"@sveltejs/amp": "^1.1.3",
 		"@sveltejs/repl": "workspace:*",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/svelte": "^5.2.3",
@@ -54,6 +56,7 @@
 		"port-authority": "^2.0.1",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
+		"shiki": "^1.22.0",
 		"topojson-client": "^3.1.0",
 		"vitest": "^2.1.2",
 		"ws": "^8.13.0",

apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts

@@ -1,5 +1,9 @@
 // @ts-expect-error has no types
 import PrismJS from 'prismjs';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-diff.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prism-svelte';
 import { read } from '$app/server';
 import { index } from '$lib/server/content';
 import { markedTransform } from '@sveltejs/site-kit/markdown';
@@ -172,7 +176,8 @@ const default_renderer: Partial<Renderer> = {
 		} else {
 			const plang = languages[lang as keyof typeof languages];
 			const highlighted = plang
-				? PrismJS.highlight(source, PrismJS.languages[plang], lang)
+				? // TODO use shiki here rather than Prism?
+					PrismJS.highlight(source, PrismJS.languages[plang], lang)
 				: escape_html(source);
 
 			html += `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;

apps/svelte.dev/svelte.config.js

@@ -8,13 +8,23 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 		prerender: {
-			// TODO remporary while not all docs are migrated
-			handleHttpError({ path }) {
-				return path === '/docs/service-workers' || path === '/docs/server-only-modules'
-					? 'warn'
-					: 'fail';
+			handleHttpError(error) {
+				if (error.status === 500) {
+					throw new Error(error.message);
+				}
+
+				// TODO fail the build
+				console.error(`404 ${error.path}`);
 			},
-			handleMissingId: 'warn'
+			handleMissingId(warning) {
+				if (warning.id.startsWith('H4sIA')) {
+					// playground link — do nothing
+					return;
+				}
+
+				// TODO fail the build
+				console.warn(`${warning.path}#${warning.id}: ${warning.referrers.join(', ')}`);
+			}
 		}
 	}
 };

apps/svelte.dev/vite.config.ts

@@ -69,7 +69,10 @@ const config: UserConfig = {
 	optimizeDeps: {
 		exclude: ['@sveltejs/site-kit', '@sveltejs/repl', '@rollup/browser']
 	},
-	ssr: { noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'] }
+	ssr: {
+		noExternal: ['@sveltejs/site-kit', '@sveltejs/repl'],
+		external: ['shiki', '@shikijs/twoslash']
+	}
 };
 
 export default config;

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

@@ -709,11 +709,13 @@ async function syntax_highlight({
 				theme
 			})
 		);
-	} else if (/^(js|ts)/.test(language)) {
+	} else if (/^(js|ts)$/.test(language)) {
 		try {
-			const banner = twoslashBanner?.(filename, source, language, options);
+			let banner = twoslashBanner?.(filename, source, language, options);
 
 			if (banner) {
+				banner = '// @filename: injected.d.ts\n' + banner;
+
 				if (source.includes('// @filename:')) {
 					source = source.replace('// @filename:', `${banner}\n\n// @filename:`);
 				} else {
@@ -738,10 +740,9 @@ async function syntax_highlight({
 				]
 			});
 		} catch (e) {
-			console.error(`Error compiling snippet in ${filename}`);
-			// @ts-ignore
-			console.error(e.code);
-			throw e;
+			console.error((e as Error).message);
+			console.warn(source);
+			throw new Error(`Error compiling snippet in ${filename}`);
 		}
 
 		html = replace_blank_lines(html);