From 1cd8264e84012a672ce5aba1643a2a52590e4589 Mon Sep 17 00:00:00 2001
From: hugos68 <hugokorteapple@gmail.com>
Date: Sat, 18 May 2024 16:50:54 +0200
Subject: [PATCH] Better init

---
 src/app.d.ts                                   |  1 +
 .../components/PageHeader/SearchDialog.svelte  | 18 ++++++------------
 src/routes/+layout.ts                          | 12 ++++++++++++
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 9f8152d..756c4d0 100644
--- a/src/app.d.ts
+++ b/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 {}
diff --git a/src/docs/components/PageHeader/SearchDialog.svelte b/src/docs/components/PageHeader/SearchDialog.svelte
index 95f36e8..a377210 100644
--- a/src/docs/components/PageHeader/SearchDialog.svelte
+++ b/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)) {
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 71978e9..bf6e708 100644
--- a/src/routes/+layout.ts
+++ b/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,
 	};