Fix updating to capture values on server rendering as well as client rendering

Author: Heliodex

Site/src/components/Navbar.svelte

@@ -10,7 +10,7 @@
 	let { user } = $derived(data)
 
 	let nav1: [string, string, string][] = $state([])
-	$effect(() => {
+	function updNav1() {
 		nav1 = [
 			// ["Home", "/", "fa-house-chimney"],
 			["Games", "/games", "fa-mountain-sun"],
@@ -23,12 +23,13 @@
 			if (data.pages.includes("Groups"))
 				nav1.push(["Groups", "/groups", "fa-people-group"])
 		})
-	})
+	}
+	updNav1()
+	$effect(updNav1)
 
 	// sing, sing, sing (https://www.youtube.com/watch?v=c0pJzW8pxWU)
 	let usernav: [string, string, string][] = $state([])
-
-	$effect(() => {
+	function updUsernav() {
 		usernav = [
 			["fa-money-bill-transfer", "Economy", "/economy"],
 			["fa-user-group", "Friends", "/requests"],
@@ -42,7 +43,9 @@
 			if (user && user.permissionLevel >= 4)
 				usernav.unshift(["fa-diamond-half-stroke", "Admin", "/admin"])
 		})
-	})
+	}
+	updUsernav()
+	$effect(updUsernav)
 </script>
 
 <nav class="py-0 justify-start z-11">

Site/src/components/Pagination.svelte

@@ -17,8 +17,7 @@
 	type Page = number | null
 
 	let pages: Page[] = $state([])
-
-	$effect(() => {
+	function updPages() {
 		pages = []
 		untrack(() => {
 			pages.push(1)
@@ -28,7 +27,9 @@
 			if (currentPage + 1 < totalPages) pages.push(0)
 			if (totalPages > 1) pages.push(totalPages)
 		})
-	})
+	}
+	updPages()
+	$effect(updPages)
 
 	const disabled = "opacity-50 pointer-events-none"
 </script>

Site/src/components/Search.svelte

@@ -22,9 +22,8 @@
 	const searchResults: HTMLElement[] = $state([])
 
 	let searchCategories: [string, string][] = $state([])
-	$effect(() => {
+	function updSearchCategories() {
 		searchCategories = [
-			["Games", "games"],
 			["Users", "users"],
 			["Places", "places"],
 			["Catalog", "assets"]
@@ -33,7 +32,9 @@
 			if (pages.includes("Groups"))
 				searchCategories.push(["Groups", "groups"])
 		})
-	})
+	}
+	updSearchCategories()
+	$effect(updSearchCategories)
 
 	function keydown(
 		e: KeyboardEvent & {

Site/src/components/forms/Input.svelte

@@ -28,7 +28,7 @@
 		formData: import("sveltekit-superforms").SuperForm<any>
 	} & HTMLInputAttributes = $props()
 
-	const { errors } = formData
+	let { errors } = $derived(formData)
 </script>
 
 <div class="flex flex-wrap {inline ? 'flex-1' : 'pb-8'}">

Site/src/components/forms/Select.svelte

@@ -27,24 +27,26 @@
 		formData: import("sveltekit-superforms").SuperForm<any>
 	} = $props()
 
-	const { form, errors, constraints } = formData
+	let { form, errors, constraints } = $derived(formData)
 
 	let trigger = $state<HTMLElement>()
-	let dropdown = $state<HTMLElement>()
+	// let dropdown = $state<HTMLElement>()
 
-	const select = new Select<string>({
-		value: selected,
-		onValueChange: val => {
-			$form[name] = val
-		}
+	let select = $derived(
+		new Select<string>({
+			value: selected,
+			onValueChange: val => {
+				$form[name] = val
+			}
 
-		// floatingConfig: {
-		// 	onCompute: a => {
-		// 		console.log(a)
-		// 		a.floatingApply(dropdown)
-		// 	}
-		// }
-	})
+			// floatingConfig: {
+			// 	onCompute: a => {
+			// 		console.log(a)
+			// 		a.floatingApply(dropdown)
+			// 	}
+			// }
+		})
+	)
 </script>
 
 <div class="flex flex-wrap pb-8">

Site/src/components/forms/SubInput.svelte

@@ -17,7 +17,8 @@
 		type: HTMLInputTypeAttribute
 		formData: import("sveltekit-superforms").SuperForm<any>
 	} & HTMLInputAttributes = $props()
-	const { form, errors, constraints } = formData
+
+	let { form, errors, constraints } = $derived(formData)
 </script>
 
 {#if type === "checkbox"}

Site/src/components/forms/Textarea.svelte

@@ -22,7 +22,7 @@
 		formData: import("sveltekit-superforms").SuperForm<any>
 	} & HTMLTextareaAttributes = $props()
 
-	const { form, errors, constraints } = formData
+	let { form, errors, constraints } = $derived(formData)
 
 	// TODO: prevent tabs in textarea caused by... the formatter....
 	$effect(() => {

Site/src/routes/(main)/develop/create/+page.svelte

@@ -9,10 +9,10 @@
 
 	const { data } = $props()
 
-	const formData = superForm(data.form)
+	let formData = $derived(superForm(data.form))
 	export const snapshot = formData
 
-	const [, c1, c2] = beautifyCurrency(data.price)
+	let [, c1, c2] = $derived(beautifyCurrency(data.price))
 
 	const assets: { [_: number]: string } = Object.freeze({
 		2: "T-Shirt",

Site/src/routes/(main)/home/+page.svelte

@@ -11,7 +11,7 @@
 	const { data } = $props()
 
 	let { user } = $derived(data)
-	const formData = superForm(data.form)
+	let formData = $derived(superForm(data.form))
 	export const snapshot = formData
 </script>
 

Site/src/routes/(main)/place/[id=asset]/[name]/Autopilot.svelte

@@ -15,12 +15,14 @@
 
 	let filepath = $state("")
 
-	const host = beginJoining(
-		() =>
-			// TODO: fix hosting and map opening with correct URI scheme
-			`${scheme}1+launchmode:ide+script:http://${domain}/game/host?ticket=${serverTicket}&autopilot=${btoa(
-				filepath
-			)}`
+	let host = $derived(
+		beginJoining(
+			() =>
+				// TODO: fix hosting and map opening with correct URI scheme
+				`${scheme}1+launchmode:ide+script:http://${domain}/game/host?ticket=${serverTicket}&autopilot=${btoa(
+					filepath
+				)}`
+		)
 	)
 </script>