Better init

src/app.d.ts

@@ -6,6 +6,7 @@ declare global {
 		// interface Locals {}
 		interface PageData {
 			highlighter: import('shiki').Highlighter;
+			pagefind: import('$docs/types.ts').Pagefind;
 		}
 		// interface PageState {}
 		// interface Platform {}

src/docs/components/PageHeader/SearchDialog.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
 	import Dialog from '../Dialog/Dialog.svelte';
 	import SearchIcon from 'lucide-svelte/icons/search';
-	import type { Pagefind } from '$docs/types.js';
+	import { page } from '$app/stores';
 
 	let open = $state(false);
-	let pagefind: Pagefind | null = $state(null);
 	let query = $state('');
 
 	const searchPromise = $derived.by(async () => {
-		if (pagefind === null || query === '') {
+		if (query === '') {
 			return [];
 		}
-		const result = await pagefind.search(query);
+
+		// FIXME: https://github.com/sveltejs/eslint-plugin-svelte/issues/652
+		// eslint-disable-next-line svelte/valid-compile
+		const result = await $page.data.pagefind.search(query);
 
 		if (result === null) {
 			return [];
@@ -20,14 +22,6 @@
 		return await Promise.all(result.results.map((result) => result.data()));
 	});
 
-	$effect(() => {
-		// @ts-expect-error - Pagefind will be present at runtime
-		import('/pagefind/pagefind.js').then((module: Pagefind) => {
-			pagefind = module;
-			pagefind.init();
-		});
-	});
-
 	$effect(() => {
 		function onKeydown(event: KeyboardEvent) {
 			if (event.key === 'k' && (event.ctrlKey || event.metaKey)) {

src/routes/+layout.ts

@@ -1,5 +1,7 @@
 import { getHighlighter } from 'shiki';
 import MoonlightDark from '$docs/themes/moonlight-dark.json';
+import type { Pagefind } from '$docs/types.js';
+import { browser } from '$app/environment';
 
 export async function load() {
 	const highlighter = await getHighlighter({
@@ -8,6 +10,16 @@ export async function load() {
 		themes: [MoonlightDark],
 	});
 
+	if (browser) {
+		// @ts-expect-error - Pagefind will be present at runtime
+		const pagefind: Pagefind = await import('/pagefind/pagefind.js');
+		await pagefind.init();
+		return {
+			highlighter,
+			pagefind,
+		};
+	}
+
 	return {
 		highlighter,
 	};