typechecking (#25)

* remove `"deprecated": null` — this should be fixed on the generation side, but this is placeholder

* fix

* add prev/next links

* fix edit link

* more

* remove console logs

* another

apps/svelte.dev/src/lib/components/Lazy.svelte

@@ -1,11 +1,18 @@
-<script>
-	import { onMount } from 'svelte';
+<script lang="ts">
+	import { onMount, type Component } from 'svelte';
 
-	let constructor;
+	let {
+		this: importer,
+		...rest
+	}: {
+		this: () => Promise<Component>;
+	} = $props();
+
+	let constructor: Component;
 
 	onMount(async () => {
-		constructor = await $$props.this();
+		constructor = await importer();
 	});
 </script>
 
-<svelte:component this={constructor} {...$$props} />
+<svelte:component this={constructor} {...rest} />

apps/svelte.dev/src/routes/docs/[...path]/+page.server.js

@@ -3,33 +3,34 @@ import { error, redirect } from '@sveltejs/kit';
 import { markedTransform } from '@sveltejs/site-kit/markdown';
 
 export async function load({ params }) {
-	const page = index[`docs/${params.path}`];
+	const document = index[`docs/${params.path}`];
 
-	if (!page) {
+	if (!document) {
 		error(404);
 	}
 
-	if (!page.body) {
-		let child = page;
+	if (!document.body) {
+		let child = document;
 
 		while (child.children[0]) {
 			child = child.children[0];
 		}
 
-		if (child === page) {
+		if (child === document) {
 			error(404);
 		}
 
 		redirect(307, `/${child.slug}`);
 	}
 
+	const pkg = params.path.split('/')[0];
+
 	return {
-		// TODO DRY this out
-		page: {
-			slug: page.slug,
-			title: page.metadata.title,
-			sections: page.sections,
-			body: await markedTransform(page.body)
+		document: {
+			...document,
+			body: await markedTransform(document.body),
+			prev: document.prev?.slug.startsWith(`docs/${pkg}/`) ? document.prev : null,
+			next: document.next?.slug.startsWith(`docs/${pkg}/`) ? document.next : null
 		}
 	};
 }

apps/svelte.dev/src/routes/docs/[...path]/+page.svelte

@@ -1,53 +1,51 @@
 <script>
-	import { page } from '$app/stores';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { copy_code_descendants } from '@sveltejs/site-kit/actions';
 	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	let { data } = $props();
 
-	const pages = $derived(data.sections.flatMap((page) => page.children));
-	const index = $derived(pages.findIndex(({ path }) => path === $page.url.pathname));
-	const prev = $derived(pages[index - 1]);
-	const next = $derived(pages[index + 1]);
-
 	setupDocsHovers();
 </script>
 
 <svelte:head>
-	<title>{data.page?.title} • Docs • Svelte</title>
-
-	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
-	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
-	<meta name="Description" content="{data.page.title} • Svelte documentation" />
+	<title>{data.document.metadata.title} • Docs • Svelte</title>
+
+	<meta name="twitter:title" content="{data.document.metadata.title} • Docs • Svelte" />
+	<meta
+		name="twitter:description"
+		content="{data.document.metadata.title} • Svelte documentation"
+	/>
+	<meta name="Description" content="{data.document.metadata.title} • Svelte documentation" />
 </svelte:head>
 
 <div class="text" id="docs-content" use:copy_code_descendants>
 	<a
 		class="edit"
-		href="https://github.com/sveltejs/svelte/edit/svelte-4/documentation/docs/{data.page.file}"
+		href="https://github.com/sveltejs/svelte.dev/edit/main/apps/svelte.dev/content/{data.document
+			.file}"
 	>
 		<Icon size={50} name="edit" /> Edit this page on GitHub
 	</a>
 
-	<DocsOnThisPage details={data.page} />
+	<DocsOnThisPage details={data.document} />
 
-	{@html data.page.body}
+	{@html data.document.body}
 </div>
 
 <div class="controls">
 	<div>
-		<span class:faded={!prev}>previous</span>
+		<span class:faded={!data.document.prev}>previous</span>
 
-		{#if prev}
-			<a href={prev.path}>{prev.metadata.title}</a>
+		{#if data.document.prev}
+			<a href="/{data.document.prev.slug}">{data.document.prev.title}</a>
 		{/if}
 	</div>
 
 	<div>
-		<span class:faded={!next}>next</span>
-		{#if next}
-			<a href={next.path}>{next.metadata.title}</a>
+		<span class:faded={!data.document.next}>next</span>
+		{#if data.document.next}
+			<a href="/{data.document.next.slug}">{data.document.next.title}</a>
 		{/if}
 	</div>
 </div>

packages/site-kit/src/lib/docs/DocsOnThisPage.svelte

@@ -17,7 +17,7 @@
 	import { readable } from 'svelte/store';
 	import { slide } from 'svelte/transition';
 
-	/** @type {{details: import('./types').Page, orientation?: 'auto' | 'inline' | 'aside', children?: import('svelte').Snippet}} */
+	/** @type {{details: import('../types').Document, orientation?: 'auto' | 'inline' | 'aside', children?: import('svelte').Snippet}} */
 	let { details, orientation = 'auto', children } = $props();
 
 	const dispatch = createEventDispatcher();
@@ -223,9 +223,9 @@
 				<ul>
 					<li>
 						<a
-							href={details.path}
+							href="/{details.slug}"
 							aria-current={hash === '' ? 'page' : false}
-							onclick={on_link_click}>{details.title}</a
+							onclick={on_link_click}>{details.metadata.title}</a
 						>
 					</li>
 					{#each details.sections as { title, slug }}

packages/site-kit/src/lib/server/content/index.ts

@@ -6,9 +6,11 @@ export async function create_index(
 	assets: Record<string, string>,
 	base: string,
 	read: (asset: string) => Response
-) {
+): Promise<Record<string, Document>> {
 	const content: Record<string, Document> = {};
 
+	const roots: Document[] = [];
+
 	for (const key in documents) {
 		if (key.includes('+assets')) continue;
 
@@ -35,19 +37,27 @@ export async function create_index(
 			metadata: metadata as { title: string; [key: string]: any },
 			body,
 			sections,
-			children: []
+			children: [],
+			prev: null,
+			next: null
 		};
 	}
 
 	for (const slug in content) {
 		const parts = slug.split('/');
 		parts.pop();
 
-		if (parts.length > 0) {
+		const document = content[slug];
+
+		if (parts.length === 0) {
+			roots.push(document);
+		} else {
 			const parent = content[parts.join('/')];
 
 			if (parent) {
-				parent.children.push(content[slug]);
+				parent.children.push(document);
+			} else {
+				roots.push(document);
 			}
 		}
 	}
@@ -62,5 +72,33 @@ export async function create_index(
 		(document.assets ??= {})[file] = assets[key];
 	}
 
+	let prev: Document | null = null;
+
+	for (const document of roots) {
+		prev = create_links(document, prev);
+	}
+
 	return content;
 }
+
+function create_links(document: Document, prev: Document | null): Document | null {
+	if (document.children.length === 0 && !document.body) {
+		throw new Error(`Document ${document.slug} has no body and no children`);
+	}
+
+	if (document.body) {
+		link(prev, document);
+		prev = document;
+	}
+
+	for (let i = 0; i < document.children.length; i += 1) {
+		prev = create_links(document.children[i], prev);
+	}
+
+	return prev;
+}
+
+function link(prev: Document | null, next: Document | null) {
+	if (prev) prev.next = next && { slug: next.slug, title: next.metadata.title };
+	if (next) next.prev = prev && { slug: prev.slug, title: prev.metadata.title };
+}

packages/site-kit/src/lib/types.d.ts

@@ -26,6 +26,8 @@ export interface Document {
 	sections: Section[];
 	children: Document[];
 	assets?: Record<string, string>;
+	next: null | { slug: string; title: string };
+	prev: null | { slug: string; title: string };
 }
 
 export interface Section {