Custom functions in +page.server.ts

[deshartman]

I understand the server load function to load data on page load, but what I am trying to understand is if there is a way to create functions that can be referenced from +page.svelte after the page has been loaded. I know this can be done with API endpoints, but I am interested to understand if there is a way to create server functions specific to just that page.

The use case would be, calling a function function on +page.server.ts from +page.svelte, when a button in +page.svelte is pressed for example. This function will run in +page.server.ts and return result to +page.svelte.

I tried creating a function and adding it to load data, but cannot stringify the function. I tried importing from +page.server.ts, but cannot do that either.

+page.server.ts

export const load = (async () => {
    const someData = {
        foo: 'bar'
    }

    const someFunction = () => {
        console.log('Hello from the server!');
    }

    return {
        someData,
        someFunction
    };
}) satisfies PageServerLoad;

+page.svelte

<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;

	const { someData, someFunction } = data;
</script>

<button on:click={someFunction}>click</button>

Is there any recommendation around this?

• Is possible?
• Should I do this?
• Is API endpoints the only way?

[eltigerchino]

You can do this with a universal load function in +page.ts. Otherwise, I think you'll need another way to serialise / de-serialise the function when sending it from the server. Can anyone confirm this?

[geoffrich]

It is not currently possible in SvelteKit to do what you're describing. The way to execute code on the server in response to a client-side action in SvelteKit is either creating an API route with +server.js files or form actions.