Explicitely define server load and action types

web-app/src/routes/(anonymous)/login/+page.server.ts

@@ -1,4 +1,6 @@
-export const actions = {
+import type { Actions } from "./$types";
+
+export const actions: Actions = {
   default: async ({ request, cookies, fetch }) => {
     const data = await request.formData();
 

web-app/src/routes/(anonymous)/login/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import type { ActionData } from "./$types";
 
-  const { form } = $props();
+  const { form } = $props<{ form: ActionData }>();
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />

web-app/src/routes/(anonymous)/register/+page.server.ts

@@ -1,4 +1,6 @@
-export const actions = {
+import type { Actions } from "./$types";
+
+export const actions: Actions = {
   default: async ({ request, fetch }) => {
     const data = await request.formData();
 

web-app/src/routes/(anonymous)/register/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import type { ActionData } from "./$types";
 
-  const { form } = $props();
+  const { form } = $props<{ form: ActionData }>();
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />

web-app/src/routes/(authenticated)/+page.server.ts

@@ -1,4 +1,6 @@
-export const load = async ({ fetch, cookies, url }) => {
+import type { Actions, PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ fetch, cookies, url }) => {
   const searchQuery = url.searchParams.get("website_search_query");
   const sortBy = url.searchParams.get("website_sort");
 
@@ -57,7 +59,7 @@ export const load = async ({ fetch, cookies, url }) => {
   };
 };
 
-export const actions = {
+export const actions: Actions = {
   createWebsite: async ({ request, fetch, cookies }) => {
     const data = await request.formData();
 

web-app/src/routes/(authenticated)/+page.svelte

@@ -5,8 +5,9 @@
   import { page } from "$app/stores";
   import Modal from "$lib/components/Modal.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import type { ActionData, PageServerData } from "./$types";
 
-  const { form, data } = $props();
+  const { form, data } = $props<{ form: ActionData; data: PageServerData }>();
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />

web-app/src/routes/(authenticated)/account/+page.server.ts

@@ -1,10 +1,12 @@
-export const load = async ({ locals }) => {
+import type { Actions, PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ locals }) => {
   return {
     user: locals.user
   };
 };
 
-export const actions = {
+export const actions: Actions = {
   logout: async ({ cookies }) => {
     cookies.delete("session_token", { path: "/" });
 

web-app/src/routes/(authenticated)/account/+page.svelte

@@ -2,8 +2,9 @@
   import { enhance } from "$app/forms";
   import Modal from "$lib/components/Modal.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import type { ActionData, PageServerData } from "./$types";
 
-  const { data, form } = $props();
+  const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />

web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts

@@ -1,4 +1,6 @@
-export const load = async ({ params, fetch, cookies }) => {
+import type { LayoutServerLoad } from "./$types";
+
+export const load: LayoutServerLoad = async ({ params, fetch, cookies }) => {
   const websiteData = await fetch(`http://localhost:3000/website?id=eq.${params.websiteId}`, {
     method: "GET",
     headers: {

web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts

@@ -1,6 +1,7 @@
 import { handleFileUpload } from "$lib/server/utils.js";
+import type { Actions, PageServerLoad } from "./$types";
 
-export const load = async ({ params, fetch, cookies, url }) => {
+export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
   const globalSettingsData = await fetch(
     `http://localhost:3000/settings?website_id=eq.${params.websiteId}&select=*,media(*)`,
     {
@@ -45,7 +46,7 @@ export const load = async ({ params, fetch, cookies, url }) => {
   };
 };
 
-export const actions = {
+export const actions: Actions = {
   updateGlobal: async ({ request, fetch, cookies, params, locals }) => {
     const data = await request.formData();
 

web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte

@@ -3,8 +3,9 @@
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import { ALLOWED_MIME_TYPES } from "$lib/utils";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import type { ActionData, PageServerData } from "./$types";
 
-  const { data, form } = $props();
+  const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts

@@ -1,4 +1,6 @@
-export const load = async ({ params, fetch, cookies, url, parent }) => {
+import type { Actions, PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent }) => {
   const searchQuery = url.searchParams.get("article_search_query");
   const sortBy = url.searchParams.get("article_sort");
 
@@ -60,7 +62,7 @@ export const load = async ({ params, fetch, cookies, url, parent }) => {
   };
 };
 
-export const actions = {
+export const actions: Actions = {
   createArticle: async ({ request, fetch, cookies, params }) => {
     const data = await request.formData();
 

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte

@@ -5,8 +5,9 @@
   import { enhance } from "$app/forms";
   import Modal from "$lib/components/Modal.svelte";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import type { ActionData, PageServerData } from "./$types";
 
-  const { data, form } = $props();
+  const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts

@@ -1,6 +1,7 @@
 import { handleFileUpload } from "$lib/server/utils.js";
+import type { Actions, PageServerLoad } from "./$types";
 
-export const load = async ({ parent, params, cookies, fetch }) => {
+export const load: PageServerLoad = async ({ parent, params, cookies, fetch }) => {
   const articleData = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
     method: "GET",
     headers: {
@@ -16,7 +17,7 @@ export const load = async ({ parent, params, cookies, fetch }) => {
   return { website, article };
 };
 
-export const actions = {
+export const actions: Actions = {
   default: async ({ fetch, cookies, request, params, locals }) => {
     const data = await request.formData();
 

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -3,8 +3,9 @@
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import { ALLOWED_MIME_TYPES } from "$lib/utils";
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import type { ActionData, PageServerData } from "./$types";
 
-  const { data, form } = $props();
+  const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />

web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts

@@ -1,8 +1,9 @@
 import { readFile, mkdir, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { md } from "$lib/utils";
+import type { Actions, PageServerLoad } from "./$types";
 
-export const load = async ({ params, fetch, cookies, locals }) => {
+export const load: PageServerLoad = async ({ params, fetch, cookies, locals }) => {
   const websiteOverviewData = await fetch(
     `http://localhost:3000/website_overview?id=eq.${params.websiteId}`,
     {
@@ -24,7 +25,7 @@ export const load = async ({ params, fetch, cookies, locals }) => {
   };
 };
 
-export const actions = {
+export const actions: Actions = {
   publishWebsite: async ({ request, fetch, cookies, params, locals }) => {
     const data = await request.formData();
     const websiteOverview = JSON.parse(data.get("website-overview") as string);

web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
+  import type { ActionData, PageServerData } from "./$types";
 
-  const { data } = $props();
+  const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
 </script>
 
 <WebsiteEditor

web-app/src/routes/+layout.server.ts

@@ -1,4 +1,6 @@
-export const load = async ({ locals }) => {
+import type { LayoutServerLoad } from "./$types";
+
+export const load: LayoutServerLoad = async ({ locals }) => {
   return {
     user: locals.user
   };

web-app/src/routes/+layout.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import "../app.css";
   import { page } from "$app/stores";
-  const { data, children } = $props();
+  import type { LayoutServerData } from "./$types";
+  import type { Snippet } from "svelte";
+
+  const { data, children } = $props<{ data: LayoutServerData; children: Snippet }>();
 
   const isProjectRoute = $derived($page.url.pathname.startsWith("/website"));
   const routeName = $derived(

web-app/svelte.config.ts

@@ -1,8 +1,8 @@
 import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { Config } from "@sveltejs/kit";
 
-/** @type {import('@sveltejs/kit').Config} */
+const config: Config = {
-const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
   preprocess: vitePreprocess(),